
<!DOCTYPE HTML>
<html lang="zh-hans" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>React · 千锋大前端小册-企业面试真题</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.3">
        <meta name="author" content="古艺散人">
        
        
    
    <link rel="stylesheet" href="../gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-splitter/splitter.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-expandable-chapters-small/expandable-chapters-small.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-anchors/plugin.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-anchor-navigation-ex/style/plugin.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-insert-logo/plugin.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
                
            
                
                <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
                
            
        

    

    
        
    

        
    
    
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="../weapp/" />
    
    
    <link rel="prev" href="../vue/" />
    

    
        <link rel="shortcut icon" href='../source/images/favicon.jpg' type="image/x-icon">
    
    
        <link rel="bookmark" href='../source/images/favicon.jpg' type="image/x-icon">
    
    
        <link rel="apple-touch-icon" href='../source/images/apple-touch-icon.jpg'>
    
    
        
        <link rel="apple-touch-icon" sizes="120x120" href="../source/images/apple-touch-icon.jpg">
        
        <link rel="apple-touch-icon" sizes="180x180" href="../source/images/apple-touch-icon.jpg">
        
    

    <style>
    @media only screen and (max-width: 640px) {
        .book-header .hidden-mobile {
            display: none;
        }
    }
    </style>
    <script>
        window["gitbook-plugin-github-buttons"] = {"buttons":[{"user":"lurongtao","repo":"felixbooks-interview","type":"star","size":"small","count":true}]};
    </script>

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="输入并搜索" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="../">
            
                <a href="../">
            
                    
                    前言
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="../HTML+CSS/">
            
                <a href="../HTML+CSS/">
            
                    
                    HTML5+CSS3
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="../javascript/">
            
                <a href="../javascript/">
            
                    
                    JavaScript
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="../node/">
            
                <a href="../node/">
            
                    
                    Node.js
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="../vue/">
            
                <a href="../vue/">
            
                    
                    Vue.js
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.6" data-path="./">
            
                <a href="./">
            
                    
                    React
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.7" data-path="../weapp/">
            
                <a href="../weapp/">
            
                    
                    小程序
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.8" data-path="../browser/">
            
                <a href="../browser/">
            
                    
                    浏览器
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.9" data-path="../network/">
            
                <a href="../network/">
            
                    
                    网络
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.10" data-path="../engineering/">
            
                <a href="../engineering/">
            
                    
                    前端工程化
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.11" data-path="../performance/">
            
                <a href="../performance/">
            
                    
                    性能
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.12" data-path="../security/">
            
                <a href="../security/">
            
                    
                    安全
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.13" data-path="../handwritten/">
            
                <a href="../handwritten/">
            
                    
                    手写代码
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.14" data-path="../algorithm/">
            
                <a href="../algorithm/">
            
                    
                    高频算法
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.15" data-path="../others/">
            
                <a href="../others/">
            
                    
                    综合
            
                </a>
            

            
        </li>
    

    
        
        <li class="divider"></li>
        
        
    
        <li class="chapter " data-level="2.1" data-path="../thanks/">
            
                <a href="../thanks/">
            
                    
                    感谢
            
                </a>
            

            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            本书使用 GitBook 发布
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href=".." >React</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <div id="anchor-navigation-ex-navbar"><i class="fa fa-navicon"></i><ul><li><span class="title-icon "></span><a href="#&#x76EE;&#x5F55;"><b></b>&#x76EE;&#x5F55;</a></li><li><span class="title-icon "></span><a href="#reactjs-&#x9762;&#x8BD5;&#x771F;&#x9898;"><b></b>React.js &#x9762;&#x8BD5;&#x771F;&#x9898;</a></li><ul><ul><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-react-&#x4E8B;&#x4EF6;&#x7ED1;&#x5B9A;&#x539F;&#x7406;"><b></b>&#x2605;&#x2605;&#x2605; React &#x4E8B;&#x4EF6;&#x7ED1;&#x5B9A;&#x539F;&#x7406;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x7684;-setstate-&#x7F3A;&#x70B9;&#x662F;&#x4EC0;&#x4E48;&#x5462;"><b></b>&#x2605;&#x2605;&#x2605; React&#x4E2D;&#x7684; setState &#x7F3A;&#x70B9;&#x662F;&#x4EC0;&#x4E48;&#x5462;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-react&#x7EC4;&#x4EF6;&#x901A;&#x4FE1;&#x5982;&#x4F55;&#x5B9E;&#x73B0;"><b></b>&#x2605;&#x2605;&#x2605; React&#x7EC4;&#x4EF6;&#x901A;&#x4FE1;&#x5982;&#x4F55;&#x5B9E;&#x73B0;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x7C7B;&#x7EC4;&#x4EF6;&#x548C;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x7684;&#x533A;&#x522B;"><b></b>&#x2605;&#x2605;&#x2605; &#x7C7B;&#x7EC4;&#x4EF6;&#x548C;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x7684;&#x533A;&#x522B;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x8BF7;&#x4F60;&#x8BF4;&#x8BF4;react&#x7684;&#x8DEF;&#x7531;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; &#x8BF7;&#x4F60;&#x8BF4;&#x8BF4;React&#x7684;&#x8DEF;&#x7531;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-react&#x6709;&#x54EA;&#x4E9B;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x7684;&#x624B;&#x6BB5;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605;&#x2605; React&#x6709;&#x54EA;&#x4E9B;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x7684;&#x624B;&#x6BB5;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-react-hooks-&#x7528;&#x8FC7;&#x5417;&#xFF0C;&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x7528;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; React hooks &#x7528;&#x8FC7;&#x5417;&#xFF0C;&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x7528;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x865A;&#x62DF;dom&#x7684;&#x4F18;&#x52A3;&#x5982;&#x4F55;&#xFF1F;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; &#x865A;&#x62DF;DOM&#x7684;&#x4F18;&#x52A3;&#x5982;&#x4F55;&#xFF1F;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-react-&#x548C;-vue-&#x7684;-diff-&#x65F6;&#x95F4;&#x590D;&#x6742;&#x5EA6;&#x4ECE;-on3-&#x4F18;&#x5316;&#x5230;-on-&#xFF0C;&#x90A3;&#x4E48;-on3-&#x548C;-on-&#x662F;&#x5982;&#x4F55;&#x8BA1;&#x7B97;&#x51FA;&#x6765;&#x7684;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; React &#x548C; Vue &#x7684; diff &#x65F6;&#x95F4;&#x590D;&#x6742;&#x5EA6;&#x4ECE; O(n^3) &#x4F18;&#x5316;&#x5230; O(n) &#xFF0C;&#x90A3;&#x4E48; O(n^3) &#x548C; O(n) &#x662F;&#x5982;&#x4F55;&#x8BA1;&#x7B97;&#x51FA;&#x6765;&#x7684;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x804A;&#x804A;-redux-&#x548C;-vuex-&#x7684;&#x8BBE;&#x8BA1;&#x601D;&#x60F3;"><b></b>&#x2605;&#x2605;&#x2605; &#x804A;&#x804A; Redux &#x548C; Vuex &#x7684;&#x8BBE;&#x8BA1;&#x601D;&#x60F3;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x4E0D;&#x540C;&#x7EC4;&#x4EF6;&#x4E4B;&#x95F4;&#x5982;&#x4F55;&#x505A;&#x5230;&#x6570;&#x636E;&#x4EA4;&#x4E92;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; React&#x4E2D;&#x4E0D;&#x540C;&#x7EC4;&#x4EF6;&#x4E4B;&#x95F4;&#x5982;&#x4F55;&#x505A;&#x5230;&#x6570;&#x636E;&#x4EA4;&#x4E92;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-react&#x4E2D;refs&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; React&#x4E2D;refs&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x8BF7;&#x5217;&#x4E3E;react&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#x3002;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; &#x8BF7;&#x5217;&#x4E3E;react&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#x3002;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x7EC4;&#x4EF6;&#x7ED1;&#x5B9A;&#x548C;js&#x539F;&#x751F;&#x7ED1;&#x5B9A;&#x4E8B;&#x4EF6;&#x54EA;&#x4E2A;&#x5148;&#x6267;&#x884C;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; &#x7EC4;&#x4EF6;&#x7ED1;&#x5B9A;&#x548C;js&#x539F;&#x751F;&#x7ED1;&#x5B9A;&#x4E8B;&#x4EF6;&#x54EA;&#x4E2A;&#x5148;&#x6267;&#x884C;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;-fetch&#x7684;&#x5EF6;&#x65F6;&#x64CD;&#x4F5C;"><b></b>&#x2605;&#x2605; fetch&#x7684;&#x5EF6;&#x65F6;&#x64CD;&#x4F5C;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;-a-&#x7EC4;&#x4EF6;&#x5D4C;&#x5957;-b-&#x7EC4;&#x4EF6;&#xFF0C;&#x751F;&#x547D;&#x5468;&#x671F;&#x6267;&#x884C;&#x987A;&#x5E8F;"><b></b>&#x2605;&#x2605; A &#x7EC4;&#x4EF6;&#x5D4C;&#x5957; B &#x7EC4;&#x4EF6;&#xFF0C;&#x751F;&#x547D;&#x5468;&#x671F;&#x6267;&#x884C;&#x987A;&#x5E8F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-diff-&#x548C;-key-&#x4E4B;&#x95F4;&#x7684;&#x8054;&#x7CFB;"><b></b>&#x2605;&#x2605;&#x2605; diff &#x548C; Key &#x4E4B;&#x95F4;&#x7684;&#x8054;&#x7CFB;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x865A;&#x62DF;-dom-&#x548C;&#x539F;&#x751F;-dom"><b></b>&#x2605;&#x2605;&#x2605; &#x865A;&#x62DF; dom &#x548C;&#x539F;&#x751F; dom</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x65B0;&#x51FA;&#x6765;&#x4E24;&#x4E2A;&#x94A9;&#x5B50;&#x51FD;&#x6570;&#xFF1F;&#x548C;&#x780D;&#x6389;&#x7684;will&#x7CFB;&#x5217;&#x6709;&#x5565;&#x533A;&#x522B;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; &#x65B0;&#x51FA;&#x6765;&#x4E24;&#x4E2A;&#x94A9;&#x5B50;&#x51FD;&#x6570;&#xFF1F;&#x548C;&#x780D;&#x6389;&#x7684;will&#x7CFB;&#x5217;&#x6709;&#x5565;&#x533A;&#x522B;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x5982;&#x4F55;&#x6253;&#x5305;&#x4E0A;&#x4F20;&#x56FE;&#x7247;&#x6587;&#x4EF6;"><b></b>&#x2605;&#x2605;&#x2605; react&#x4E2D;&#x5982;&#x4F55;&#x6253;&#x5305;&#x4E0A;&#x4F20;&#x56FE;&#x7247;&#x6587;&#x4EF6;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x5BF9;&#x5355;&#x5411;&#x6570;&#x636E;&#x6D41;&#x548C;&#x53CC;&#x5411;&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#x7684;&#x7406;&#x89E3;&#xFF0C;&#x597D;&#x5904;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; &#x5BF9;&#x5355;&#x5411;&#x6570;&#x636E;&#x6D41;&#x548C;&#x53CC;&#x5411;&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#x7684;&#x7406;&#x89E3;&#xFF0C;&#x597D;&#x5904;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;-react-&#x7EC4;&#x4EF6;&#x4E2D;-props-&#x548C;-state-&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;"><b></b>&#x2605;&#x2605; React &#x7EC4;&#x4EF6;&#x4E2D; props &#x548C; state &#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;-react&#x4E2D;&#x7EC4;&#x4EF6;&#x5206;&#x4E3A;&#x90A3;&#x4FE9;&#x79CD;&#xFF1F;"><b></b>&#x2605;&#x2605; react&#x4E2D;&#x7EC4;&#x4EF6;&#x5206;&#x4E3A;&#x90A3;&#x4FE9;&#x79CD;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;-react&#x4E2D;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x548C;&#x666E;&#x901A;&#x7EC4;&#x4EF6;&#x7684;&#x533A;&#x522B;&#xFF1F;"><b></b>&#x2605;&#x2605; react&#x4E2D;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x548C;&#x666E;&#x901A;&#x7EC4;&#x4EF6;&#x7684;&#x533A;&#x522B;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-react&#x4E2D;-setstate-&#x4E4B;&#x540E;&#x505A;&#x4E86;&#x4EC0;&#x4E48;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; react&#x4E2D; setState &#x4E4B;&#x540E;&#x505A;&#x4E86;&#x4EC0;&#x4E48;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-redux&#x672C;&#x6765;&#x662F;&#x540C;&#x6B65;&#x7684;&#xFF0C;&#x4E3A;&#x4EC0;&#x4E48;&#x5B83;&#x80FD;&#x6267;&#x884C;&#x5F02;&#x6B65;&#x4EE3;&#x7801;&#xFF1F;&#x4E2D;&#x95F4;&#x4EF6;&#x7684;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; redux&#x672C;&#x6765;&#x662F;&#x540C;&#x6B65;&#x7684;&#xFF0C;&#x4E3A;&#x4EC0;&#x4E48;&#x5B83;&#x80FD;&#x6267;&#x884C;&#x5F02;&#x6B65;&#x4EE3;&#x7801;&#xFF1F;&#x4E2D;&#x95F4;&#x4EF6;&#x7684;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x5217;&#x4E3E;&#x91CD;&#x65B0;&#x6E32;&#x67D3;-render-&#x7684;&#x60C5;&#x51B5;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; &#x5217;&#x4E3E;&#x91CD;&#x65B0;&#x6E32;&#x67D3; render &#x7684;&#x60C5;&#x51B5;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-react-&#x6309;&#x9700;&#x52A0;&#x8F7D;"><b></b>&#x2605;&#x2605;&#x2605; React &#x6309;&#x9700;&#x52A0;&#x8F7D;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-react-&#x5B9E;&#x73B0;&#x76EE;&#x5F55;&#x6811;&#xFF08;&#x7EC4;&#x4EF6;&#x81EA;&#x8EAB;&#x8C03;&#x7528;&#x81EA;&#x8EAB;&#xFF09;"><b></b>&#x2605;&#x2605;&#x2605; React &#x5B9E;&#x73B0;&#x76EE;&#x5F55;&#x6811;&#xFF08;&#x7EC4;&#x4EF6;&#x81EA;&#x8EAB;&#x8C03;&#x7528;&#x81EA;&#x8EAB;&#xFF09;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-react&#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x6309;&#x88C5;&#x8F7D;&#xFF0C;&#x66F4;&#x65B0;&#xFF0C;&#x9500;&#x6BC1;&#x4E09;&#x4E2A;&#x9636;&#x6BB5;&#x5206;&#x522B;&#x90FD;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; React&#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x6309;&#x88C5;&#x8F7D;&#xFF0C;&#x66F4;&#x65B0;&#xFF0C;&#x9500;&#x6BC1;&#x4E09;&#x4E2A;&#x9636;&#x6BB5;&#x5206;&#x522B;&#x90FD;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-&#x8C03;&#x7528;thissetstate&#x4E4B;&#x540E;&#xFF0C;react&#x90FD;&#x505A;&#x4E86;&#x54EA;&#x4E9B;&#x64CD;&#x4F5C;&#xFF1F;&#x600E;&#x4E48;&#x62FF;&#x5230;&#x6539;&#x53D8;&#x540E;&#x7684;&#x503C;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605;&#x2605; &#x8C03;&#x7528;this.setState&#x4E4B;&#x540E;&#xFF0C;React&#x90FD;&#x505A;&#x4E86;&#x54EA;&#x4E9B;&#x64CD;&#x4F5C;&#xFF1F;&#x600E;&#x4E48;&#x62FF;&#x5230;&#x6539;&#x53D8;&#x540E;&#x7684;&#x503C;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x5982;&#x679C;&#x6211;&#x8FDB;&#x884C;&#x4E09;&#x6B21;setstate&#x4F1A;&#x53D1;&#x751F;&#x4EC0;&#x4E48;"><b></b>&#x2605;&#x2605;&#x2605; &#x5982;&#x679C;&#x6211;&#x8FDB;&#x884C;&#x4E09;&#x6B21;setState&#x4F1A;&#x53D1;&#x751F;&#x4EC0;&#x4E48;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x5FAA;&#x73AF;&#x6267;&#x884C;setstate&#x7EC4;&#x4EF6;&#x4F1A;&#x4E00;&#x76F4;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x5417;&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; &#x5FAA;&#x73AF;&#x6267;&#x884C;setState&#x7EC4;&#x4EF6;&#x4F1A;&#x4E00;&#x76F4;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x5417;&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x6E32;&#x67D3;&#x4E00;&#x4E2A;react&#x7EC4;&#x4EF6;&#x7684;&#x8FC7;&#x7A0B;"><b></b>&#x2605;&#x2605;&#x2605; &#x6E32;&#x67D3;&#x4E00;&#x4E2A;react&#x7EC4;&#x4EF6;&#x7684;&#x8FC7;&#x7A0B;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-react&#x7C7B;&#x7EC4;&#x4EF6;&#xFF0C;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#xFF0C;&#x5728;&#x7C7B;&#x7EC4;&#x4EF6;&#x4FEE;&#x6539;&#x7EC4;&#x4EF6;&#x5BF9;&#x8C61;&#x4F1A;&#x4F7F;&#x7528;&#x3002;"><b></b>&#x2605;&#x2605;&#x2605; React&#x7C7B;&#x7EC4;&#x4EF6;&#xFF0C;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#xFF0C;&#x5728;&#x7C7B;&#x7EC4;&#x4EF6;&#x4FEE;&#x6539;&#x7EC4;&#x4EF6;&#x5BF9;&#x8C61;&#x4F1A;&#x4F7F;&#x7528;&#x3002;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x7C7B;&#x7EC4;&#x4EF6;&#x600E;&#x4E48;&#x505A;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF1F;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x600E;&#x4E48;&#x505A;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; &#x7C7B;&#x7EC4;&#x4EF6;&#x600E;&#x4E48;&#x505A;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF1F;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x600E;&#x4E48;&#x505A;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-useeffect-&#x548C;-uselayouteffect-&#x7684;&#x533A;&#x522B;"><b></b>&#x2605;&#x2605;&#x2605; useEffect &#x548C; useLayoutEffect &#x7684;&#x533A;&#x522B;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-hooks-&#x7684;&#x4F7F;&#x7528;&#x6709;&#x4EC0;&#x4E48;&#x6CE8;&#x610F;&#x4E8B;&#x9879;"><b></b>&#x2605;&#x2605;&#x2605; hooks &#x7684;&#x4F7F;&#x7528;&#x6709;&#x4EC0;&#x4E48;&#x6CE8;&#x610F;&#x4E8B;&#x9879;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x7EAF;&#x51FD;&#x6570;&#x6709;&#x4EC0;&#x4E48;&#x7279;&#x70B9;&#xFF0C;&#x526F;&#x4F5C;&#x7528;&#x51FD;&#x6570;&#x7279;&#x70B9;"><b></b>&#x2605;&#x2605;&#x2605; &#x7EAF;&#x51FD;&#x6570;&#x6709;&#x4EC0;&#x4E48;&#x7279;&#x70B9;&#xFF0C;&#x526F;&#x4F5C;&#x7528;&#x51FD;&#x6570;&#x7279;&#x70B9;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;-react-&#x4E2D;-refs-&#x5E72;&#x561B;&#x7528;&#x7684;&#xFF1F;&#x5982;&#x4F55;&#x521B;&#x5EFA;-refs&#xFF1F;"><b></b>&#x2605;&#x2605; React &#x4E2D; refs &#x5E72;&#x561B;&#x7528;&#x7684;&#xFF1F;&#x5982;&#x4F55;&#x521B;&#x5EFA; refs&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x5728;&#x6784;&#x9020;&#x51FD;&#x6570;&#x8C03;&#x7528;-super-&#x5E76;&#x5C06;-props-&#x4F5C;&#x4E3A;&#x53C2;&#x6570;&#x4F20;&#x5165;&#x7684;&#x4F5C;&#x7528;&#x662F;&#x5565;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; &#x5728;&#x6784;&#x9020;&#x51FD;&#x6570;&#x8C03;&#x7528; `super` &#x5E76;&#x5C06; `props` &#x4F5C;&#x4E3A;&#x53C2;&#x6570;&#x4F20;&#x5165;&#x7684;&#x4F5C;&#x7528;&#x662F;&#x5565;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;-reactcreateelement-&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; &#x5982;&#x4F55; React.createElement &#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x8BB2;&#x8BB2;&#x4EC0;&#x4E48;&#x662F;-jsx-&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; &#x8BB2;&#x8BB2;&#x4EC0;&#x4E48;&#x662F; JSX &#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x4E0D;&#x76F4;&#x63A5;&#x66F4;&#x65B0;-state-&#x5462;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; &#x4E3A;&#x4EC0;&#x4E48;&#x4E0D;&#x76F4;&#x63A5;&#x66F4;&#x65B0; `state` &#x5462;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-react-&#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x6709;&#x54EA;&#x4E9B;&#x4E0D;&#x540C;&#x9636;&#x6BB5;&#xFF1F;react-&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x65B9;&#x6CD5;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; React &#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x6709;&#x54EA;&#x4E9B;&#x4E0D;&#x540C;&#x9636;&#x6BB5;&#xFF1F;React &#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x65B9;&#x6CD5;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x8FD9;&#x4E09;&#x4E2A;&#x70B9;&#x5728;-react-&#x5E72;&#x561B;&#x7528;&#x7684;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; &#x8FD9;&#x4E09;&#x4E2A;&#x70B9;(...)&#x5728; React &#x5E72;&#x561B;&#x7528;&#x7684;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-react-&#x4E2D;&#x7684;-usestate-&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; React &#x4E2D;&#x7684; `useState()` &#x662F;&#x4EC0;&#x4E48;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-react-&#x4E2D;&#x7684;strictmode&#x4E25;&#x683C;&#x6A21;&#x5F0F;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; React &#x4E2D;&#x7684;StrictMode(&#x4E25;&#x683C;&#x6A21;&#x5F0F;)&#x662F;&#x4EC0;&#x4E48;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x7C7B;&#x65B9;&#x6CD5;&#x9700;&#x8981;&#x7ED1;&#x5B9A;&#x5230;&#x7C7B;&#x5B9E;&#x4F8B;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; &#x4E3A;&#x4EC0;&#x4E48;&#x7C7B;&#x65B9;&#x6CD5;&#x9700;&#x8981;&#x7ED1;&#x5B9A;&#x5230;&#x7C7B;&#x5B9E;&#x4F8B;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-prop-drilling&#xFF0C;&#x5982;&#x4F55;&#x907F;&#x514D;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; &#x4EC0;&#x4E48;&#x662F; prop drilling&#xFF0C;&#x5982;&#x4F55;&#x907F;&#x514D;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;-&#x63CF;&#x8FF0;-flux-&#x4E0E;-mvc&#xFF1F;"><b></b>&#x2605;&#x2605; &#x63CF;&#x8FF0; Flux &#x4E0E; MVC&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x8FD9;&#x6BB5;&#x4EE3;&#x7801;&#x6709;&#x4EC0;&#x4E48;&#x95EE;&#x9898;&#x5417;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; &#x8FD9;&#x6BB5;&#x4EE3;&#x7801;&#x6709;&#x4EC0;&#x4E48;&#x95EE;&#x9898;&#x5417;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-react-context"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; &#x4EC0;&#x4E48;&#x662F; React Context?</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-react-fiber"><b></b>&#x2605;&#x2605;&#x2605;&#x2605;&#x2605; &#x4EC0;&#x4E48;&#x662F; React Fiber?</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5728;-react-&#x7684;-props-&#x4E0A;&#x5E94;&#x7528;&#x9A8C;&#x8BC1;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; &#x5982;&#x4F55;&#x5728; React &#x7684; Props &#x4E0A;&#x5E94;&#x7528;&#x9A8C;&#x8BC1;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;-&#x5728;-react-&#x4E2D;&#x4F7F;&#x7528;&#x6784;&#x9020;&#x51FD;&#x6570;&#x548C;-getinitialstate-&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;"><b></b>&#x2605;&#x2605; &#x5728; React &#x4E2D;&#x4F7F;&#x7528;&#x6784;&#x9020;&#x51FD;&#x6570;&#x548C; getInitialState &#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x6709;&#x6761;&#x4EF6;&#x5730;&#x5411;-react-&#x7EC4;&#x4EF6;&#x6DFB;&#x52A0;&#x5C5E;&#x6027;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; &#x5982;&#x4F55;&#x6709;&#x6761;&#x4EF6;&#x5730;&#x5411; React &#x7EC4;&#x4EF6;&#x6DFB;&#x52A0;&#x5C5E;&#x6027;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-hooks-&#x4F1A;&#x53D6;&#x4EE3;-render-props-&#x548C;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x5417;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; Hooks &#x4F1A;&#x53D6;&#x4EE3; `render props` &#x548C;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x5417;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x907F;&#x514D;&#x7EC4;&#x4EF6;&#x7684;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; &#x5982;&#x4F55;&#x907F;&#x514D;&#x7EC4;&#x4EF6;&#x7684;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;&#x7EAF;&#x51FD;&#x6570;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; &#x4EC0;&#x4E48;&#x662F;&#x7EAF;&#x51FD;&#x6570;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x5F53;&#x8C03;&#x7528;setstate&#x65F6;&#xFF0C;react-render-&#x662F;&#x5982;&#x4F55;&#x5DE5;&#x4F5C;&#x7684;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; &#x5F53;&#x8C03;&#x7528;`setState`&#x65F6;&#xFF0C;React `render` &#x662F;&#x5982;&#x4F55;&#x5DE5;&#x4F5C;&#x7684;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x907F;&#x514D;&#x5728;react&#x91CD;&#x65B0;&#x7ED1;&#x5B9A;&#x5B9E;&#x4F8B;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; &#x5982;&#x4F55;&#x907F;&#x514D;&#x5728;React&#x91CD;&#x65B0;&#x7ED1;&#x5B9A;&#x5B9E;&#x4F8B;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x5728;js&#x539F;&#x751F;&#x4E8B;&#x4EF6;&#x4E2D;-onclick-&#x548C;-jsx-&#x91CC;-onclick-&#x7684;&#x533A;&#x522B;-"><b></b>&#x2605;&#x2605;&#x2605; &#x5728;js&#x539F;&#x751F;&#x4E8B;&#x4EF6;&#x4E2D; onclick &#x548C; jsx &#x91CC; onclick &#x7684;&#x533A;&#x522B; </a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-diff&#x590D;&#x6742;&#x5EA6;&#x539F;&#x7406;&#x53CA;&#x5177;&#x4F53;&#x8FC7;&#x7A0B;&#x753B;&#x56FE;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; diff&#x590D;&#x6742;&#x5EA6;&#x539F;&#x7406;&#x53CA;&#x5177;&#x4F53;&#x8FC7;&#x7A0B;&#x753B;&#x56FE;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-shouldcomponentupdate&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; shouldComponentUpdate&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-react&#x7EC4;&#x4EF6;&#x95F4;&#x4FE1;&#x606F;&#x4F20;&#x9012;"><b></b>&#x2605;&#x2605;&#x2605; React&#x7EC4;&#x4EF6;&#x95F4;&#x4FE1;&#x606F;&#x4F20;&#x9012;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-react&#x72B6;&#x6001;&#x7BA1;&#x7406;&#x5DE5;&#x5177;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;redux-actioncreator&#x90FD;&#x6709;&#x4EC0;&#x4E48;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; React&#x72B6;&#x6001;&#x7BA1;&#x7406;&#x5DE5;&#x5177;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;redux actionCreator&#x90FD;&#x6709;&#x4EC0;&#x4E48;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x3001;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#x53CA;&#x975E;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#xFF1F;&#x90FD;&#x6709;&#x5565;&#x533A;&#x522B;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; &#x4EC0;&#x4E48;&#x662F;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x3001;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#x53CA;&#x975E;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#xFF1F;&#x90FD;&#x6709;&#x5565;&#x533A;&#x522B;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-vuex-&#x548C;-redux-&#x7684;&#x533A;&#x522B;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; vuex &#x548C; redux &#x7684;&#x533A;&#x522B;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-redux&#x9075;&#x5FAA;&#x7684;&#x4E09;&#x4E2A;&#x539F;&#x5219;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; Redux&#x9075;&#x5FAA;&#x7684;&#x4E09;&#x4E2A;&#x539F;&#x5219;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x7684;keys&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; React&#x4E2D;&#x7684;keys&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-redux&#x4E2D;&#x4F7F;&#x7528;setstate&#x4E0D;&#x80FD;&#x7ACB;&#x523B;&#x83B7;&#x53D6;&#x503C;&#xFF0C;&#x600E;&#x4E48;&#x529E;"><b></b>&#x2605;&#x2605;&#x2605; redux&#x4E2D;&#x4F7F;&#x7528;setState&#x4E0D;&#x80FD;&#x7ACB;&#x523B;&#x83B7;&#x53D6;&#x503C;&#xFF0C;&#x600E;&#x4E48;&#x529E;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;jsx"><b></b>&#x2605;&#x2605; &#x4EC0;&#x4E48;&#x662F;JSX</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-react&#x65B0;&#x8001;&#x7248;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;"><b></b>&#x2605;&#x2605;&#x2605; React&#x65B0;&#x8001;&#x7248;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-vue-react&#x90FD;&#x600E;&#x4E48;&#x68C0;&#x6D4B;&#x6570;&#x636E;&#x53D8;&#x5316;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; vue react&#x90FD;&#x600E;&#x4E48;&#x68C0;&#x6D4B;&#x6570;&#x636E;&#x53D8;&#x5316;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x600E;&#x4E48;&#x8BA9;-setstate-&#x540C;&#x6B65;&#x66F4;&#x65B0;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; React&#x4E2D;&#x600E;&#x4E48;&#x8BA9; setState &#x540C;&#x6B65;&#x66F4;&#x65B0;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-immutable&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x4F7F;&#x7528;&#x5B83;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; &#x4EC0;&#x4E48;&#x662F; immutable&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x4F7F;&#x7528;&#x5B83;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x4E0D;&#x5EFA;&#x8BAE;&#x5728;-componentwillmount-&#x505A;ajax&#x64CD;&#x4F5C;"><b></b>&#x2605;&#x2605;&#x2605; &#x4E3A;&#x4EC0;&#x4E48;&#x4E0D;&#x5EFA;&#x8BAE;&#x5728; componentWillMount &#x505A;AJAX&#x64CD;&#x4F5C;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5728;react&#x4E2D;&#x6784;&#x5EFA;&#x4E00;&#x4E2A;&#x5F39;&#x51FA;&#x7684;&#x906E;&#x7F69;&#x5C42;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; &#x5982;&#x4F55;&#x5728;React&#x4E2D;&#x6784;&#x5EFA;&#x4E00;&#x4E2A;&#x5F39;&#x51FA;&#x7684;&#x906E;&#x7F69;&#x5C42;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x7684;context&#x7684;&#x4F7F;&#x7528;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605;&#x2605; React&#x4E2D;&#x7684;Context&#x7684;&#x4F7F;&#x7528;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-react&#x8DEF;&#x7531;&#x61D2;&#x52A0;&#x8F7D;&#x7684;&#x5B9E;&#x73B0;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; React&#x8DEF;&#x7531;&#x61D2;&#x52A0;&#x8F7D;&#x7684;&#x5B9E;&#x73B0;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-react-router-dom&#x5185;&#x90E8;&#x662F;&#x600E;&#x4E48;&#x6837;&#x5B9E;&#x73B0;&#x7684;&#xFF0C;&#x600E;&#x4E48;&#x505A;&#x8DEF;&#x7531;&#x5B88;&#x536B;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; React-router-dom&#x5185;&#x90E8;&#x662F;&#x600E;&#x4E48;&#x6837;&#x5B9E;&#x73B0;&#x7684;&#xFF0C;&#x600E;&#x4E48;&#x505A;&#x8DEF;&#x7531;&#x5B88;&#x536B;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-redux&#x4E2D;sages&#x548C;thunk&#x4E2D;&#x95F4;&#x4EF6;&#x7684;&#x533A;&#x522B;&#xFF0C;&#x4F18;&#x7F3A;&#x70B9;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; redux&#x4E2D;sages&#x548C;thunk&#x4E2D;&#x95F4;&#x4EF6;&#x7684;&#x533A;&#x522B;&#xFF0C;&#x4F18;&#x7F3A;&#x70B9;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x8BF4;react&#x662F;view&#xFF08;&#x89C6;&#x56FE;&#x5C42;&#xFF09;"><b></b>&#x2605;&#x2605; &#x4E3A;&#x4EC0;&#x4E48;&#x8BF4;React&#x662F;view&#xFF08;&#x89C6;&#x56FE;&#x5C42;&#xFF09;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x600E;&#x4E48;&#x7528;useeffect&#x6A21;&#x62DF;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; &#x600E;&#x4E48;&#x7528;useEffect&#x6A21;&#x62DF;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-usecallback&#x662F;&#x5E72;&#x4EC0;&#x4E48;&#x7684;&#xFF1F;&#x4F7F;&#x7528;usecallback&#x6709;&#x4EC0;&#x4E48;&#x597D;&#x5904;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; useCallback&#x662F;&#x5E72;&#x4EC0;&#x4E48;&#x7684;&#xFF1F;&#x4F7F;&#x7528;useCallback&#x6709;&#x4EC0;&#x4E48;&#x597D;&#x5904;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x80FD;&#x7B80;&#x5355;&#x8BF4;&#x4E00;&#x4E0B;redux-sage&#x7684;&#x4F7F;&#x7528;&#x6D41;&#x7A0B;&#x5417;&#xFF1F;"><b></b>&#x2605;&#x2605;&#x2605; &#x80FD;&#x7B80;&#x5355;&#x8BF4;&#x4E00;&#x4E0B;redux-sage&#x7684;&#x4F7F;&#x7528;&#x6D41;&#x7A0B;&#x5417;&#xFF1F;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;&#x2605;-react&#x590D;&#x7528;&#x7EC4;&#x4EF6;&#x7684;&#x72B6;&#x6001;&#x548C;&#x589E;&#x5F3A;&#x529F;&#x80FD;&#x7684;&#x65B9;&#x6CD5;"><b></b>&#x2605;&#x2605;&#x2605;&#x2605; React&#x590D;&#x7528;&#x7EC4;&#x4EF6;&#x7684;&#x72B6;&#x6001;&#x548C;&#x589E;&#x5F3A;&#x529F;&#x80FD;&#x7684;&#x65B9;&#x6CD5;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-redux-&#x548C;-mobx-&#x7684;&#x533A;&#x522B;"><b></b>&#x2605;&#x2605;&#x2605; redux &#x548C; mobx &#x7684;&#x533A;&#x522B;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x547D;&#x540D;&#x63D2;&#x69FD;"><b></b>&#x2605;&#x2605;&#x2605; react&#x4E2D;&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x547D;&#x540D;&#x63D2;&#x69FD;</a></li><li><span class="title-icon "></span><a href="#&#x2605;&#x2605;&#x2605;-&#x7B80;&#x5355;&#x8BF4;&#x4E00;&#x4E0B;&#xFF0C;&#x5982;&#x4F55;&#x5728;react&#x4E2D;&#x5B9E;&#x73B0;&#x7011;&#x5E03;&#x6D41;&#x52A0;&#x8F7D;&#xFF1F;&#xFF08;&#x5DE6;&#x53F3;&#x4E24;&#x5217;&#x7684;&#x4E00;&#x4E2A;&#x5546;&#x54C1;&#x957F;&#x5217;&#x8868;&#xFF09;"><b></b>&#x2605;&#x2605;&#x2605; &#x7B80;&#x5355;&#x8BF4;&#x4E00;&#x4E0B;&#xFF0C;&#x5982;&#x4F55;&#x5728;react&#x4E2D;&#x5B9E;&#x73B0;&#x7011;&#x5E03;&#x6D41;&#x52A0;&#x8F7D;&#xFF1F;&#xFF08;&#x5DE6;&#x53F3;&#x4E24;&#x5217;&#x7684;&#x4E00;&#x4E2A;&#x5546;&#x54C1;&#x957F;&#x5217;&#x8868;&#xFF09;</a></li></ul></ul></ul></div><a href="#&#x76EE;&#x5F55;" id="anchorNavigationExGoTop"><i class="fa fa-arrow-up"></i></a><h1 id="&#x76EE;&#x5F55;"><a name="&#x76EE;&#x5F55;" class="anchor-navigation-ex-anchor" href="#&#x76EE;&#x5F55;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x76EE;&#x5F55;" class="plugin-anchor" href="#&#x76EE;&#x5F55;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x76EE;&#x5F55;</h1>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; React &#x4E8B;&#x4EF6;&#x7ED1;&#x5B9A;&#x539F;&#x7406;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; React&#x4E2D;&#x7684; setState &#x7F3A;&#x70B9;&#x662F;&#x4EC0;&#x4E48;&#x5462;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; React&#x7EC4;&#x4EF6;&#x901A;&#x4FE1;&#x5982;&#x4F55;&#x5B9E;&#x73B0;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x7C7B;&#x7EC4;&#x4EF6;&#x548C;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x7684;&#x533A;&#x522B;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x8BF7;&#x4F60;&#x8BF4;&#x8BF4;React&#x7684;&#x8DEF;&#x7531;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605;&#x2605; React&#x6709;&#x54EA;&#x4E9B;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x7684;&#x624B;&#x6BB5;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; React hooks &#x7528;&#x8FC7;&#x5417;&#xFF0C;&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x7528;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; &#x865A;&#x62DF;DOM&#x7684;&#x4F18;&#x52A3;&#x5982;&#x4F55;&#xFF1F;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; React &#x548C; Vue &#x7684; diff &#x65F6;&#x95F4;&#x590D;&#x6742;&#x5EA6;&#x4ECE; O(n^3) &#x4F18;&#x5316;&#x5230; O(n) &#xFF0C;&#x90A3;&#x4E48; O(n^3) &#x548C; O(n) &#x662F;&#x5982;&#x4F55;&#x8BA1;&#x7B97;&#x51FA;&#x6765;&#x7684;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x804A;&#x804A; Redux &#x548C; Vuex &#x7684;&#x8BBE;&#x8BA1;&#x601D;&#x60F3;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; React&#x4E2D;&#x4E0D;&#x540C;&#x7EC4;&#x4EF6;&#x4E4B;&#x95F4;&#x5982;&#x4F55;&#x505A;&#x5230;&#x6570;&#x636E;&#x4EA4;&#x4E92;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; React&#x4E2D;refs&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; &#x8BF7;&#x5217;&#x4E3E;react&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#x3002;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x7EC4;&#x4EF6;&#x7ED1;&#x5B9A;&#x548C;js&#x539F;&#x751F;&#x7ED1;&#x5B9A;&#x4E8B;&#x4EF6;&#x54EA;&#x4E2A;&#x5148;&#x6267;&#x884C;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605; fetch&#x7684;&#x5EF6;&#x65F6;&#x64CD;&#x4F5C;</a></p>
<p><a href="#react-1">&#x2605;&#x2605; A &#x7EC4;&#x4EF6;&#x5D4C;&#x5957; B &#x7EC4;&#x4EF6;&#xFF0C;&#x751F;&#x547D;&#x5468;&#x671F;&#x6267;&#x884C;&#x987A;&#x5E8F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; diff &#x548C; Key &#x4E4B;&#x95F4;&#x7684;&#x8054;&#x7CFB;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x865A;&#x62DF; dom &#x548C;&#x539F;&#x751F; dom</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; &#x65B0;&#x51FA;&#x6765;&#x4E24;&#x4E2A;&#x94A9;&#x5B50;&#x51FD;&#x6570;&#xFF1F;&#x548C;&#x780D;&#x6389;&#x7684;will&#x7CFB;&#x5217;&#x6709;&#x5565;&#x533A;&#x522B;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; react&#x4E2D;&#x5982;&#x4F55;&#x6253;&#x5305;&#x4E0A;&#x4F20;&#x56FE;&#x7247;&#x6587;&#x4EF6;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x5BF9;&#x5355;&#x5411;&#x6570;&#x636E;&#x6D41;&#x548C;&#x53CC;&#x5411;&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#x7684;&#x7406;&#x89E3;&#xFF0C;&#x597D;&#x5904;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605; React &#x7EC4;&#x4EF6;&#x4E2D; props &#x548C; state &#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605; react&#x4E2D;&#x7EC4;&#x4EF6;&#x5206;&#x4E3A;&#x90A3;&#x4FE9;&#x79CD;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605; react&#x4E2D;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x548C;&#x666E;&#x901A;&#x7EC4;&#x4EF6;&#x7684;&#x533A;&#x522B;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; react&#x4E2D; setState &#x4E4B;&#x540E;&#x505A;&#x4E86;&#x4EC0;&#x4E48;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; redux&#x672C;&#x6765;&#x662F;&#x540C;&#x6B65;&#x7684;&#xFF0C;&#x4E3A;&#x4EC0;&#x4E48;&#x5B83;&#x80FD;&#x6267;&#x884C;&#x5F02;&#x6B65;&#x4EE3;&#x7801;&#xFF1F;&#x4E2D;&#x95F4;&#x4EF6;&#x7684;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; &#x5217;&#x4E3E;&#x91CD;&#x65B0;&#x6E32;&#x67D3; render &#x7684;&#x60C5;&#x51B5;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; React &#x6309;&#x9700;&#x52A0;&#x8F7D;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; React &#x5B9E;&#x73B0;&#x76EE;&#x5F55;&#x6811;&#xFF08;&#x7EC4;&#x4EF6;&#x81EA;&#x8EAB;&#x8C03;&#x7528;&#x81EA;&#x8EAB;&#xFF09;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; React&#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x6309;&#x88C5;&#x8F7D;&#xFF0C;&#x66F4;&#x65B0;&#xFF0C;&#x9500;&#x6BC1;&#x4E09;&#x4E2A;&#x9636;&#x6BB5;&#x5206;&#x522B;&#x90FD;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605;&#x2605; &#x8C03;&#x7528;this.setState&#x4E4B;&#x540E;&#xFF0C;React&#x90FD;&#x505A;&#x4E86;&#x54EA;&#x4E9B;&#x64CD;&#x4F5C;&#xFF1F;&#x600E;&#x4E48;&#x62FF;&#x5230;&#x6539;&#x53D8;&#x540E;&#x7684;&#x503C;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x5982;&#x679C;&#x6211;&#x8FDB;&#x884C;&#x4E09;&#x6B21;setState&#x4F1A;&#x53D1;&#x751F;&#x4EC0;&#x4E48;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x5FAA;&#x73AF;&#x6267;&#x884C;setState&#x7EC4;&#x4EF6;&#x4F1A;&#x4E00;&#x76F4;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x5417;&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x6E32;&#x67D3;&#x4E00;&#x4E2A;react&#x7EC4;&#x4EF6;&#x7684;&#x8FC7;&#x7A0B;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; React&#x7C7B;&#x7EC4;&#x4EF6;&#xFF0C;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#xFF0C;&#x5728;&#x7C7B;&#x7EC4;&#x4EF6;&#x4FEE;&#x6539;&#x7EC4;&#x4EF6;&#x5BF9;&#x8C61;&#x4F1A;&#x4F7F;&#x7528;&#x3002;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; &#x7C7B;&#x7EC4;&#x4EF6;&#x600E;&#x4E48;&#x505A;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF1F;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x600E;&#x4E48;&#x505A;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; useEffect &#x548C; useLayoutEffect &#x7684;&#x533A;&#x522B;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; hooks &#x7684;&#x4F7F;&#x7528;&#x6709;&#x4EC0;&#x4E48;&#x6CE8;&#x610F;&#x4E8B;&#x9879;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x7EAF;&#x51FD;&#x6570;&#x6709;&#x4EC0;&#x4E48;&#x7279;&#x70B9;&#xFF0C;&#x526F;&#x4F5C;&#x7528;&#x51FD;&#x6570;&#x7279;&#x70B9;</a></p>
<p><a href="#react-1">&#x2605;&#x2605; React &#x4E2D; refs &#x5E72;&#x561B;&#x7528;&#x7684;&#xFF1F;&#x5982;&#x4F55;&#x521B;&#x5EFA; refs&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x5728;&#x6784;&#x9020;&#x51FD;&#x6570;&#x8C03;&#x7528; <code>super</code> &#x5E76;&#x5C06; <code>props</code> &#x4F5C;&#x4E3A;&#x53C2;&#x6570;&#x4F20;&#x5165;&#x7684;&#x4F5C;&#x7528;&#x662F;&#x5565;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x5982;&#x4F55; React.createElement &#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x8BB2;&#x8BB2;&#x4EC0;&#x4E48;&#x662F; JSX &#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x4E3A;&#x4EC0;&#x4E48;&#x4E0D;&#x76F4;&#x63A5;&#x66F4;&#x65B0; <code>state</code> &#x5462;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; React &#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x6709;&#x54EA;&#x4E9B;&#x4E0D;&#x540C;&#x9636;&#x6BB5;&#xFF1F;React &#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x65B9;&#x6CD5;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x8FD9;&#x4E09;&#x4E2A;&#x70B9;(...)&#x5728; React &#x5E72;&#x561B;&#x7528;&#x7684;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; React &#x4E2D;&#x7684; <code>useState()</code> &#x662F;&#x4EC0;&#x4E48;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; React &#x4E2D;&#x7684;StrictMode(&#x4E25;&#x683C;&#x6A21;&#x5F0F;)&#x662F;&#x4EC0;&#x4E48;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x4E3A;&#x4EC0;&#x4E48;&#x7C7B;&#x65B9;&#x6CD5;&#x9700;&#x8981;&#x7ED1;&#x5B9A;&#x5230;&#x7C7B;&#x5B9E;&#x4F8B;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; &#x4EC0;&#x4E48;&#x662F; prop drilling&#xFF0C;&#x5982;&#x4F55;&#x907F;&#x514D;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605; &#x63CF;&#x8FF0; Flux &#x4E0E; MVC&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x8FD9;&#x6BB5;&#x4EE3;&#x7801;&#x6709;&#x4EC0;&#x4E48;&#x95EE;&#x9898;&#x5417;&#xFF1F;</a></p>
<pre><code class="lang-js"><span class="hljs-keyword">this</span>.setState((prevState, props) =&gt; {
  <span class="hljs-keyword">return</span> {
    streak: prevState.streak + props.count
  }
})
</code></pre>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; &#x4EC0;&#x4E48;&#x662F; React Context?</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605;&#x2605; &#x4EC0;&#x4E48;&#x662F; React Fiber?</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x5982;&#x4F55;&#x5728; React &#x7684; Props &#x4E0A;&#x5E94;&#x7528;&#x9A8C;&#x8BC1;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605; &#x5728; React &#x4E2D;&#x4F7F;&#x7528;&#x6784;&#x9020;&#x51FD;&#x6570;&#x548C; getInitialState &#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x5982;&#x4F55;&#x6709;&#x6761;&#x4EF6;&#x5730;&#x5411; React &#x7EC4;&#x4EF6;&#x6DFB;&#x52A0;&#x5C5E;&#x6027;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; Hooks &#x4F1A;&#x53D6;&#x4EE3; <code>render props</code> &#x548C;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x5417;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x5982;&#x4F55;&#x907F;&#x514D;&#x7EC4;&#x4EF6;&#x7684;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x4EC0;&#x4E48;&#x662F;&#x7EAF;&#x51FD;&#x6570;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; &#x5F53;&#x8C03;&#x7528;<code>setState</code>&#x65F6;&#xFF0C;React <code>render</code> &#x662F;&#x5982;&#x4F55;&#x5DE5;&#x4F5C;&#x7684;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x5982;&#x4F55;&#x907F;&#x514D;&#x5728;React&#x91CD;&#x65B0;&#x7ED1;&#x5B9A;&#x5B9E;&#x4F8B;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x5728;js&#x539F;&#x751F;&#x4E8B;&#x4EF6;&#x4E2D; onclick &#x548C; jsx &#x91CC; onclick &#x7684;&#x533A;&#x522B; </a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; diff&#x590D;&#x6742;&#x5EA6;&#x539F;&#x7406;&#x53CA;&#x5177;&#x4F53;&#x8FC7;&#x7A0B;&#x753B;&#x56FE;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; shouldComponentUpdate&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; React&#x7EC4;&#x4EF6;&#x95F4;&#x4FE1;&#x606F;&#x4F20;&#x9012;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; React&#x72B6;&#x6001;&#x7BA1;&#x7406;&#x5DE5;&#x5177;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;redux actionCreator&#x90FD;&#x6709;&#x4EC0;&#x4E48;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; &#x4EC0;&#x4E48;&#x662F;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x3001;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#x53CA;&#x975E;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#xFF1F;&#x90FD;&#x6709;&#x5565;&#x533A;&#x522B;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; vuex &#x548C; redux &#x7684;&#x533A;&#x522B;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; Redux&#x9075;&#x5FAA;&#x7684;&#x4E09;&#x4E2A;&#x539F;&#x5219;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; React&#x4E2D;&#x7684;keys&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; redux&#x4E2D;&#x4F7F;&#x7528;setState&#x4E0D;&#x80FD;&#x7ACB;&#x523B;&#x83B7;&#x53D6;&#x503C;&#xFF0C;&#x600E;&#x4E48;&#x529E;</a></p>
<p><a href="#react-1">&#x2605;&#x2605; &#x4EC0;&#x4E48;&#x662F;JSX</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; React&#x65B0;&#x8001;&#x7248;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; vue react&#x90FD;&#x600E;&#x4E48;&#x68C0;&#x6D4B;&#x6570;&#x636E;&#x53D8;&#x5316;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; React&#x4E2D;&#x600E;&#x4E48;&#x8BA9; setState &#x540C;&#x6B65;&#x66F4;&#x65B0;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; &#x4EC0;&#x4E48;&#x662F; immutable&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x4F7F;&#x7528;&#x5B83;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x4E3A;&#x4EC0;&#x4E48;&#x4E0D;&#x5EFA;&#x8BAE;&#x5728; componentWillMount &#x505A;AJAX&#x64CD;&#x4F5C;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; &#x5982;&#x4F55;&#x5728;React&#x4E2D;&#x6784;&#x5EFA;&#x4E00;&#x4E2A;&#x5F39;&#x51FA;&#x7684;&#x906E;&#x7F69;&#x5C42;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605;&#x2605; React&#x4E2D;&#x7684;Context&#x7684;&#x4F7F;&#x7528;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; React&#x8DEF;&#x7531;&#x61D2;&#x52A0;&#x8F7D;&#x7684;&#x5B9E;&#x73B0;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; React-router-dom&#x5185;&#x90E8;&#x662F;&#x600E;&#x4E48;&#x6837;&#x5B9E;&#x73B0;&#x7684;&#xFF0C;&#x600E;&#x4E48;&#x505A;&#x8DEF;&#x7531;&#x5B88;&#x536B;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; redux&#x4E2D;sages&#x548C;thunk&#x4E2D;&#x95F4;&#x4EF6;&#x7684;&#x533A;&#x522B;&#xFF0C;&#x4F18;&#x7F3A;&#x70B9;</a></p>
<p><a href="#react-1">&#x2605;&#x2605; &#x4E3A;&#x4EC0;&#x4E48;&#x8BF4;React&#x662F;view&#xFF08;&#x89C6;&#x56FE;&#x5C42;&#xFF09;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x600E;&#x4E48;&#x7528;useEffect&#x6A21;&#x62DF;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; useCallback&#x662F;&#x5E72;&#x4EC0;&#x4E48;&#x7684;&#xFF1F;&#x4F7F;&#x7528;useCallback&#x6709;&#x4EC0;&#x4E48;&#x597D;&#x5904;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x80FD;&#x7B80;&#x5355;&#x8BF4;&#x4E00;&#x4E0B;redux-sage&#x7684;&#x4F7F;&#x7528;&#x6D41;&#x7A0B;&#x5417;&#xFF1F;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605; React&#x590D;&#x7528;&#x7EC4;&#x4EF6;&#x7684;&#x72B6;&#x6001;&#x548C;&#x589E;&#x5F3A;&#x529F;&#x80FD;&#x7684;&#x65B9;&#x6CD5;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; redux &#x548C; mobx &#x7684;&#x533A;&#x522B;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; react&#x4E2D;&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x547D;&#x540D;&#x63D2;&#x69FD;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605; &#x7B80;&#x5355;&#x8BF4;&#x4E00;&#x4E0B;&#xFF0C;&#x5982;&#x4F55;&#x5728;react&#x4E2D;&#x5B9E;&#x73B0;&#x7011;&#x5E03;&#x6D41;&#x52A0;&#x8F7D;&#xFF1F;&#xFF08;&#x5DE6;&#x53F3;&#x4E24;&#x5217;&#x7684;&#x4E00;&#x4E2A;&#x5546;&#x54C1;&#x957F;&#x5217;&#x8868;&#xFF09;</a></p>
<p><a href="#react-1">&#x2605;&#x2605;&#x2605;&#x2605;&#x2605; &#x7B80;&#x8FF0;&#x4E00;&#x4E0B; memoization</a></p>
<h1 id="reactjs-&#x9762;&#x8BD5;&#x771F;&#x9898;"><a name="reactjs-&#x9762;&#x8BD5;&#x771F;&#x9898;" class="anchor-navigation-ex-anchor" href="#reactjs-&#x9762;&#x8BD5;&#x771F;&#x9898;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="reactjs-&#x9762;&#x8BD5;&#x771F;&#x9898;" class="plugin-anchor" href="#reactjs-&#x9762;&#x8BD5;&#x771F;&#x9898;"><i class="fa fa-link" aria-hidden="true"></i></a>React.js &#x9762;&#x8BD5;&#x771F;&#x9898;</h1>
<h3 id="&#x2605;&#x2605;&#x2605;-react-&#x4E8B;&#x4EF6;&#x7ED1;&#x5B9A;&#x539F;&#x7406;"><a name="&#x2605;&#x2605;&#x2605;-react-&#x4E8B;&#x4EF6;&#x7ED1;&#x5B9A;&#x539F;&#x7406;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-react-&#x4E8B;&#x4EF6;&#x7ED1;&#x5B9A;&#x539F;&#x7406;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-react-&#x4E8B;&#x4EF6;&#x7ED1;&#x5B9A;&#x539F;&#x7406;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-react-&#x4E8B;&#x4EF6;&#x7ED1;&#x5B9A;&#x539F;&#x7406;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; React &#x4E8B;&#x4EF6;&#x7ED1;&#x5B9A;&#x539F;&#x7406;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
        &#x4E00;&#x3001;react&#x5E76;&#x6CA1;&#x6709;&#x4F7F;&#x7528;&#x539F;&#x751F;&#x7684;&#x6D4F;&#x89C8;&#x5668;&#x4E8B;&#x4EF6;&#xFF0C;&#x800C;&#x662F;&#x5728;&#x57FA;&#x4E8E;Virtual DOM&#x7684;&#x57FA;&#x7840;&#x4E0A;&#x5B9E;&#x73B0;&#x4E86;&#x5408;&#x6210;&#x4E8B;&#x4EF6;&#xFF0C;&#x91C7;&#x7528;&#x5C0F;&#x9A7C;&#x5CF0;&#x547D;&#x540D;&#x6CD5;&#xFF0C;&#x9ED8;&#x8BA4;&#x7684;&#x4E8B;&#x4EF6;&#x4F20;&#x64AD;&#x65B9;&#x5F0F;&#x662F;&#x5192;&#x6CE1;&#xFF0C;&#x5982;&#x679C;&#x60F3;&#x6539;&#x4E3A;&#x6355;&#x83B7;&#x7684;&#x8BDD;&#xFF0C;&#x76F4;&#x63A5;&#x5728;&#x4E8B;&#x4EF6;&#x540D;&#x540E;&#x9762;&#x52A0;&#x4E0A;Capture&#x5373;&#x53EF;&#xFF1B;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;event&#x4E5F;&#x4E0D;&#x662F;&#x539F;&#x751F;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;&#xFF0C;&#x800C;&#x662F;&#x5408;&#x6210;&#x5BF9;&#x8C61;&#xFF0C;&#x4F46;&#x901A;&#x8FC7;nativeEvent&#x5C5E;&#x6027;&#x53EF;&#x4EE5;&#x8BBF;&#x95EE;&#x539F;&#x751F;&#x4E8B;&#x4EF6;&#x5BF9;&#x8C61;&#xFF1B;
        &#x4E8C;&#x3001;react&#x5408;&#x6210;&#x4E8B;&#x4EF6;&#x4E3B;&#x8981;&#x5206;&#x4E3A;&#x4EE5;&#x4E0B;&#x4E09;&#x4E2A;&#x8FC7;&#x7A0B;&#xFF1A;
        1&#x3001;&#x4E8B;&#x4EF6;&#x6CE8;&#x518C;
        &#x5728;&#x8BE5;&#x9636;&#x6BB5;&#x4E3B;&#x8981;&#x505A;&#x4E86;&#x4E24;&#x4EF6;&#x4E8B;&#xFF1A;document&#x4E0A;&#x6CE8;&#x518C;&#x3001;&#x5B58;&#x50A8;&#x4E8B;&#x4EF6;&#x56DE;&#x8C03;&#x3002;&#x6240;&#x6709;&#x4E8B;&#x4EF6;&#x90FD;&#x4F1A;&#x6CE8;&#x518C;&#x5230;document&#x4E0A;&#xFF0C;&#x62E5;&#x6709;&#x7EDF;&#x4E00;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;dispatchEvent&#x6765;&#x6267;&#x884C;&#x4E8B;&#x4EF6;&#x5206;&#x53D1;&#xFF0C;&#x7C7B;&#x4F3C;&#x4E8E;document.addEventListener(&quot;click&quot;,dispatchEvent)&#x3002;
      register:
          addEventListener-click
          addEventListener-change

      listenerBank:
           {
                click: {key1: fn1, key2: fn2},
                change: {key1: fn3, key3: fn4}
           }
    2&#x3001;&#x4E8B;&#x4EF6;&#x5408;&#x6210;
        &#x4E8B;&#x4EF6;&#x89E6;&#x53D1;&#x540E;&#xFF0C;&#x4F1A;&#x6267;&#x884C;&#x4E00;&#x4E0B;&#x8FC7;&#x7A0B;&#xFF1A;
        &#xFF08;1&#xFF09;&#x8FDB;&#x5165;&#x7EDF;&#x4E00;&#x7684;&#x4E8B;&#x4EF6;&#x5206;&#x53D1;&#x51FD;&#x6570;dispatchEvent&#xFF1B;
    &#xFF08;2&#xFF09;&#x627E;&#x5230;&#x89E6;&#x53D1;&#x4E8B;&#x4EF6;&#x7684; ReactDOMComponent&#xFF1B;
    &#xFF08;3&#xFF09;&#x5F00;&#x59CB;&#x4E8B;&#x4EF6;&#x7684;&#x5408;&#x6210;&#xFF1B;
            &#x2014;&#x2014; &#x6839;&#x636E;&#x5F53;&#x524D;&#x4E8B;&#x4EF6;&#x7C7B;&#x578B;&#x751F;&#x6210;&#x6307;&#x5B9A;&#x7684;&#x5408;&#x6210;&#x5BF9;&#x8C61;
                &#x2014;&#x2014; &#x5C01;&#x88C5;&#x539F;&#x751F;&#x4E8B;&#x4EF6;&#x548C;&#x5192;&#x6CE1;&#x673A;&#x5236;
                &#x2014;&#x2014; &#x67E5;&#x627E;&#x5F53;&#x524D;&#x5143;&#x7D20;&#x4EE5;&#x53CA;&#x4ED6;&#x6240;&#x6709;&#x7236;&#x7EA7;
                &#x2014;&#x2014; &#x5728;listenerBank&#x6839;&#x636E;key&#x503C;&#x67E5;&#x627E;&#x4E8B;&#x4EF6;&#x56DE;&#x8C03;&#x5E76;&#x5408;&#x6210;&#x5230; event(&#x5408;&#x6210;&#x4E8B;&#x4EF6;&#x7ED3;&#x675F;)
   3&#x3001;&#x6279;&#x5904;&#x7406;
           &#x6279;&#x91CF;&#x5904;&#x7406;&#x5408;&#x6210;&#x4E8B;&#x4EF6;&#x5185;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x7684;-setstate-&#x7F3A;&#x70B9;&#x662F;&#x4EC0;&#x4E48;&#x5462;"><a name="&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x7684;-setstate-&#x7F3A;&#x70B9;&#x662F;&#x4EC0;&#x4E48;&#x5462;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x7684;-setstate-&#x7F3A;&#x70B9;&#x662F;&#x4EC0;&#x4E48;&#x5462;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x7684;-setstate-&#x7F3A;&#x70B9;&#x662F;&#x4EC0;&#x4E48;&#x5462;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x7684;-setstate-&#x7F3A;&#x70B9;&#x662F;&#x4EC0;&#x4E48;&#x5462;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; React&#x4E2D;&#x7684; setState &#x7F3A;&#x70B9;&#x662F;&#x4EC0;&#x4E48;&#x5462;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
        setState&#x6267;&#x884C;&#x7684;&#x65F6;&#x5019;&#x53EF;&#x4EE5;&#x7B80;&#x5355;&#x7684;&#x8BA4;&#x4E3A;&#xFF0C;&#x96B6;&#x5C5E;&#x4E8E;&#x539F;&#x751F;js&#x6267;&#x884C;&#x7684;&#x7A7A;&#x95F4;&#xFF0C;&#x90A3;&#x4E48;&#x5C31;&#x662F;&#x5C5E;&#x4E8E;&#x540C;&#x6B65;&#xFF0C;&#x88AB;react&#x5904;&#x7406;&#x8FC7;&#x7684;&#x7A7A;&#x95F4;&#x5C5E;&#x4E8E;&#x5F02;&#x6B65;&#xFF0C;&#x8FD9;&#x5176;&#x5B9E;&#x4E5F;&#x662F;&#x4E00;&#x79CD;&#x6027;&#x80FD;&#x7684;&#x4F18;&#x5316;&#xFF0C;&#x5982;&#x679C;&#x591A;&#x6B21;&#x4F7F;&#x7528;setState&#x4FEE;&#x6539;&#x503C;&#xFF0C;&#x90A3;&#x4E48;&#x5728;&#x5F02;&#x6B65;&#x4E2D;&#x4F1A;&#x5148;&#x8FDB;&#x884C;&#x5408;&#x5E76;&#xFF0C;&#x518D;&#x8FDB;&#x884C;&#x6E32;&#x67D3;&#xFF0C;&#x964D;&#x4F4E;&#x4E86;&#x64CD;&#x4F5C;dom&#x7684;&#x6B21;&#x6570;&#xFF0C;&#x5177;&#x4F53;&#x5982;&#x4E0B;&#xFF1A;

        &#xFF08;1&#xFF09;setState &#x5728;&#x5408;&#x6210;&#x4E8B;&#x4EF6;&#x548C;&#x94A9;&#x5B50;&#x51FD;&#x6570;&#x4E2D;&#x662F;&#x201C;&#x5F02;&#x6B65;&#x201D;&#x7684;&#xFF0C;&#x5728;&#x539F;&#x751F;&#x4E8B;&#x4EF6;&#x548C; `setTimeout` &#x4E2D;&#x90FD;&#x662F;&#x540C;&#x6B65;&#x7684;&#x3002;
        &#xFF08;2&#xFF09;setState&#x7684;&#x201C;&#x5F02;&#x6B65;&#x201D;&#x5E76;&#x4E0D;&#x662F;&#x8BF4;&#x5185;&#x90E8;&#x7531;&#x5F02;&#x6B65;&#x4EE3;&#x7801;&#x5B9E;&#x73B0;&#xFF0C;&#x5176;&#x5B9E;&#x672C;&#x8EAB;&#x6267;&#x884C;&#x7684;&#x8FC7;&#x7A0B;&#x548C;&#x4EE3;&#x7801;&#x90FD;&#x662F;&#x540C;&#x6B65;&#x7684;&#xFF0C;&#x53EA;&#x662F;&#x5408;&#x6210;&#x4E8B;&#x4EF6;&#x548C;&#x94A9;&#x5B50;&#x51FD;&#x6570;&#x7684;&#x8C03;&#x7528;&#x987A;&#x5E8F;&#x5728;&#x66F4;&#x65B0;&#x4E4B;&#x524D;&#xFF0C;&#x5BFC;&#x81F4;&#x5728;&#x5408;&#x6210;&#x4E8B;&#x4EF6;&#x548C;&#x94A9;&#x5B50;&#x51FD;&#x6570;&#x4E2D;&#x6CA1;&#x6CD5;&#x7ACB;&#x9A6C;&#x62FF;&#x5230;&#x66F4;&#x65B0;&#x540E;&#x7684;&#x503C;&#xFF0C;&#x5F62;&#x5F0F;&#x4E86;&#x6240;&#x8C13;&#x7684;&#x201C;&#x5F02;&#x6B65;&#x201D;&#xFF0C;&#x5F53;&#x7136;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x7B2C;&#x4E8C;&#x4E2A;&#x53C2;&#x6570; setState(partialState, callback) &#x4E2D;&#x7684;callback&#x62FF;&#x5230;&#x66F4;&#x65B0;&#x540E;&#x7684;&#x7ED3;&#x679C;&#x3002;
        &#xFF08;3&#xFF09;setState &#x7684;&#x6279;&#x91CF;&#x66F4;&#x65B0;&#x4F18;&#x5316;&#x4E5F;&#x662F;&#x5EFA;&#x7ACB;&#x5728;&#x201C;&#x5F02;&#x6B65;&#x201D;&#xFF08;&#x5408;&#x6210;&#x4E8B;&#x4EF6;&#x3001;&#x94A9;&#x5B50;&#x51FD;&#x6570;&#xFF09;&#x4E4B;&#x4E0A;&#x7684;&#xFF0C;&#x5728;&#x539F;&#x751F;&#x4E8B;&#x4EF6;&#x548C;setTimeout &#x4E2D;&#x4E0D;&#x4F1A;&#x6279;&#x91CF;&#x66F4;&#x65B0;&#xFF0C;&#x5728;&#x201C;&#x5F02;&#x6B65;&#x201D;&#x4E2D;&#x5982;&#x679C;&#x5BF9;&#x540C;&#x4E00;&#x4E2A;&#x503C;&#x8FDB;&#x884C;&#x591A;&#x6B21; setState&#xFF0C; setState &#x7684;&#x6279;&#x91CF;&#x66F4;&#x65B0;&#x7B56;&#x7565;&#x4F1A;&#x5BF9;&#x5176;&#x8FDB;&#x884C;&#x8986;&#x76D6;&#xFF0C;&#x53D6;&#x6700;&#x540E;&#x4E00;&#x6B21;&#x7684;&#x6267;&#x884C;&#xFF0C;&#x5982;&#x679C;&#x662F;&#x540C;&#x65F6; setState &#x591A;&#x4E2A;&#x4E0D;&#x540C;&#x7684;&#x503C;&#xFF0C;&#x5728;&#x66F4;&#x65B0;&#x65F6;&#x4F1A;&#x5BF9;&#x5176;&#x8FDB;&#x884C;&#x5408;&#x5E76;&#x6279;&#x91CF;&#x66F4;&#x65B0;&#x3002;
        &#xFF08;4&#xFF09;&#x6B63;&#x662F;&#x7531;&#x4E8E;setState&#x5B58;&#x5728;&#x5F02;&#x6B65;&#x7684;&#x673A;&#x5236;&#xFF0C;&#x5982;&#x679C;setState&#x4FEE;&#x6539;&#x503C;&#x7684;&#x65F6;&#x5019;&#x4F9D;&#x8D56;&#x4E8E;state&#x672C;&#x8EAB;&#x7684;&#x503C;&#xFF0C;&#x6709;&#x65F6;&#x5019;&#x5E76;&#x4E0D;&#x53EF;&#x9760;&#xFF0C;&#x8FD9;&#x65F6;&#x5019;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x4F20;&#x5165;&#x4E00;&#x4E2A;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#x4F5C;&#x4E3A;&#x5176;&#x5165;&#x53C2;&#xFF0C;&#x8FD9;&#x4E2A;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x53C2;&#x6570;&#x4E3A;&#x66F4;&#x65B0;&#x524D;&#x7684;state&#x503C;&#x3002;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-react&#x7EC4;&#x4EF6;&#x901A;&#x4FE1;&#x5982;&#x4F55;&#x5B9E;&#x73B0;"><a name="&#x2605;&#x2605;&#x2605;-react&#x7EC4;&#x4EF6;&#x901A;&#x4FE1;&#x5982;&#x4F55;&#x5B9E;&#x73B0;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x7EC4;&#x4EF6;&#x901A;&#x4FE1;&#x5982;&#x4F55;&#x5B9E;&#x73B0;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-react&#x7EC4;&#x4EF6;&#x901A;&#x4FE1;&#x5982;&#x4F55;&#x5B9E;&#x73B0;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x7EC4;&#x4EF6;&#x901A;&#x4FE1;&#x5982;&#x4F55;&#x5B9E;&#x73B0;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; React&#x7EC4;&#x4EF6;&#x901A;&#x4FE1;&#x5982;&#x4F55;&#x5B9E;&#x73B0;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
        react&#x672C;&#x8EAB;:
                (1)props&#x2014;&#x2014;&#x7236;&#x7EC4;&#x4EF6;&#x5411;&#x5B50;&#x7EC4;&#x4EF6;&#x901A;&#x8FC7;props&#x4F20;&#x53C2;
                (2)&#x5B9E;&#x4F8B;&#x65B9;&#x6CD5;&#x2014;&#x2014;&#x5728;&#x7236;&#x7EC4;&#x4EF6;&#x4E2D;&#x53EF;&#x4EE5;&#x7528; refs &#x5F15;&#x7528;&#x5B50;&#x7EC4;&#x4EF6;&#xFF0C;&#x4E4B;&#x540E;&#x5C31;&#x53EF;&#x4EE5;&#x8C03;&#x7528;&#x5B50;&#x7EC4;&#x4EF6;&#x7684;&#x5B9E;&#x4F8B;&#x65B9;&#x6CD5;&#x4E86;
                (3)&#x56DE;&#x8C03;&#x51FD;&#x6570;&#x2014;&#x2014;&#x7528;&#x4E8E;&#x5B50;&#x7EC4;&#x4EF6;&#x5411;&#x7236;&#x7EC4;&#x4EF6;&#x901A;&#x4FE1;&#xFF0C;&#x5B50;&#x7EC4;&#x4EF6;&#x8C03;&#x7528;props&#x4F20;&#x9012;&#x8FC7;&#x6765;&#x7684;&#x65B9;&#x6CD5;
                (4)&#x72B6;&#x6001;&#x63D0;&#x5347;&#x2014;&#x2014;&#x4E24;&#x4E2A;&#x5B50;&#x7EC4;&#x4EF6;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x7236;&#x7EC4;&#x4EF6;&#x5B9A;&#x4E49;&#x7684;&#x53C2;&#x6570;&#x8FDB;&#x884C;&#x4F20;&#x53C2;
                (5)Context&#x4E0A;&#x4E0B;&#x6587;&#x2014;&#x2014;&#x4E00;&#x822C;&#x7528;&#x4F5C;&#x5168;&#x5C40;&#x4E3B;&#x9898;
                (6)Render Props&#x2014;&#x2014;&#x6E32;&#x67D3;&#x7684;&#x7EC6;&#x8282;&#x7531;&#x7236;&#x7EC4;&#x4EF6;&#x63A7;&#x5236;

            &#x72B6;&#x6001;&#x7BA1;&#x7406;:
                (1) mobx/redux/dva&#x2014;&#x2014;&#x901A;&#x8FC7;&#x5728;view&#x4E2D;&#x89E6;&#x53D1;action&#xFF0C;&#x6539;&#x53D8;state&#xFF0C;&#x8FDB;&#x800C;&#x6539;&#x53D8;&#x5176;&#x4ED6;&#x7EC4;&#x4EF6;&#x7684;view
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x7C7B;&#x7EC4;&#x4EF6;&#x548C;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x7684;&#x533A;&#x522B;"><a name="&#x2605;&#x2605;&#x2605;-&#x7C7B;&#x7EC4;&#x4EF6;&#x548C;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x7684;&#x533A;&#x522B;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x7C7B;&#x7EC4;&#x4EF6;&#x548C;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x7684;&#x533A;&#x522B;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x7C7B;&#x7EC4;&#x4EF6;&#x548C;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x7684;&#x533A;&#x522B;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x7C7B;&#x7EC4;&#x4EF6;&#x548C;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x7684;&#x533A;&#x522B;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x7C7B;&#x7EC4;&#x4EF6;&#x548C;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x7684;&#x533A;&#x522B;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*            
            &#xFF08;1&#xFF09;&#x8BED;&#x6CD5;&#x4E0A;&#xFF1A;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x662F;&#x4E00;&#x4E2A;&#x51FD;&#x6570;&#xFF0C;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;jsx&#x5143;&#x7D20;&#xFF0C;&#x800C;&#x7C7B;&#x7EC4;&#x4EF6;&#x662F;&#x7528;es6&#x8BED;&#x6CD5;&#x7CD6;class&#x5B9A;&#x4E49;&#xFF0C;&#x7EE7;&#x627F;component&#x8FD9;&#x4E2A;&#x7C7B;
            &#xFF08;2&#xFF09;&#x7C7B;&#x7EC4;&#x4EF6;&#x4E2D;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;state&#x8FDB;&#x884C;&#x72B6;&#x6001;&#x7BA1;&#x7406;&#xFF0C;&#x800C;&#x5728;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x4E2D;&#x4E0D;&#x80FD;&#x4F7F;&#x7528;setState()&#xFF0C;&#x5728;react16.8&#x4EE5;&#x540E;&#xFF0C;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;hooks&#x4E2D;&#x7684;useState&#x6765;&#x6A21;&#x62DF;&#x7C7B;&#x7EC4;&#x4EF6;&#x4E2D;&#x7684;&#x72B6;&#x6001;&#x7BA1;&#x7406;&#xFF1B;
            &#xFF08;3&#xFF09;&#x7C7B;&#x7EC4;&#x4EF6;&#x4E2D;&#x6709;&#x4E00;&#x7CFB;&#x5217;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x94A9;&#x5B50;&#x51FD;&#x6570;&#xFF0C;&#x5728;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x4E2D;&#x4E5F;&#x9700;&#x8981;&#x501F;&#x52A9;hooks&#x6765;&#x4F7F;&#x7528;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#xFF1B;
            &#xFF08;4&#xFF09;&#x7C7B;&#x7EC4;&#x4EF6;&#x80FD;&#x591F;&#x6355;&#x83B7;**&#x6700;&#x65B0;**&#x7684;&#x503C;&#xFF08;&#x6C38;&#x8FDC;&#x4FDD;&#x6301;&#x4E00;&#x81F4;&#xFF09;&#xFF0C;&#x8FD9;&#x662F;&#x56E0;&#x4E3A;&#x5F53;&#x5B9E;&#x4F8B;&#x7684;props&#x5C5E;&#x6027;&#x53D1;&#x751F;&#x4FEE;&#x6539;&#x65F6;&#xFF0C;class&#x7EC4;&#x4EF6;&#x80FD;&#x591F;&#x76F4;&#x63A5;&#x901A;&#x8FC7;this&#x6355;&#x83B7;&#x5230;&#x7EC4;&#x4EF6;&#x6700;&#x65B0;&#x7684;props&#xFF1B;&#x800C;&#x51FD;&#x6570;&#x5F0F;&#x7EC4;&#x4EF6;&#x662F;&#x6355;&#x83B7;**&#x6E32;&#x67D3;**&#x6240;&#x4F7F;&#x7528;&#x7684;&#x503C;&#xFF0C;&#x5DF2;&#x7ECF;&#x56E0;&#x4E3A;javascript**&#x95ED;&#x5305;**&#x7684;&#x7279;&#x6027;&#xFF0C;&#x4E4B;&#x524D;&#x7684;props&#x53C2;&#x6570;&#x4FDD;&#x5B58;&#x5728;&#x5185;&#x5B58;&#x4E4B;&#x4E2D;&#xFF0C;&#x65E0;&#x6CD5;&#x4ECE;&#x5916;&#x90E8;&#x8FDB;&#x884C;&#x4FEE;&#x6539;&#x3002;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x8BF7;&#x4F60;&#x8BF4;&#x8BF4;react&#x7684;&#x8DEF;&#x7531;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-&#x8BF7;&#x4F60;&#x8BF4;&#x8BF4;react&#x7684;&#x8DEF;&#x7531;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x8BF7;&#x4F60;&#x8BF4;&#x8BF4;react&#x7684;&#x8DEF;&#x7531;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x8BF7;&#x4F60;&#x8BF4;&#x8BF4;react&#x7684;&#x8DEF;&#x7531;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x8BF7;&#x4F60;&#x8BF4;&#x8BF4;react&#x7684;&#x8DEF;&#x7531;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x8BF7;&#x4F60;&#x8BF4;&#x8BF4;React&#x7684;&#x8DEF;&#x7531;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
        &#x8DEF;&#x7531;&#x5206;&#x4E3A;&#x524D;&#x7AEF;&#x8DEF;&#x7531;&#x548C;&#x540E;&#x7AEF;&#x8DEF;&#x7531;&#xFF0C;&#x540E;&#x7AEF;&#x8DEF;&#x7531;&#x662F;&#x670D;&#x52A1;&#x5668;&#x6839;&#x636E;&#x7528;&#x6237;&#x53D1;&#x8D77;&#x7684;&#x8BF7;&#x6C42;&#x800C;&#x8FD4;&#x56DE;&#x4E0D;&#x540C;&#x5185;&#x5BB9;&#xFF0C;&#x524D;&#x7AEF;&#x8DEF;&#x7531;&#x662F;&#x5BA2;&#x6237;&#x7AEF;&#x6839;&#x636E;&#x4E0D;&#x540C;&#x7684;URL&#x53BB;&#x5207;&#x6362;&#x7EC4;&#x4EF6;&#xFF1B;&#x5728;web&#x5E94;&#x7528;&#x524D;&#x7AEF;&#x5F00;&#x53D1;&#x4E2D;&#xFF0C;&#x8DEF;&#x7531;&#x7CFB;&#x7EDF;&#x662F;&#x6700;&#x6838;&#x5FC3;&#x7684;&#x90E8;&#x5206;&#xFF0C;&#x5F53;&#x9875;&#x9762;&#x7684;URL&#x53D1;&#x751F;&#x6539;&#x53D8;&#x65F6;&#xFF0C;&#x9875;&#x9762;&#x7684;&#x663E;&#x793A;&#x7ED3;&#x679C;&#x53EF;&#x4EE5;&#x6839;&#x636E;URL&#x7684;&#x53D8;&#x5316;&#x800C;&#x53D8;&#x5316;&#xFF0C;&#x4F46;&#x662F;&#x9875;&#x9762;&#x4E0D;&#x4F1A;&#x5237;&#x65B0;&#x3002;

        react&#x751F;&#x6001;&#x4E2D;&#x8DEF;&#x7531;&#x901A;&#x5E38;&#x662F;&#x4F7F;&#x7528;react-router&#x6765;&#x8FDB;&#x884C;&#x914D;&#x7F6E;&#xFF0C;&#x5176;&#x4E3B;&#x8981;&#x6784;&#x6210;&#x4E3A;&#xFF1A;
&#xFF08;1&#xFF09;Router&#x2014;&#x2014;&#x5BF9;&#x5E94;&#x8DEF;&#x7531;&#x7684;&#x4E24;&#x79CD;&#x6A21;&#x5F0F;&#xFF0C;&#x5305;&#x62EC;&lt;BrowsersRouter&gt;&#x4E0E;&lt;HashRouter&gt;&#xFF1B;
&#xFF08;2&#xFF09;route matching&#x7EC4;&#x4EF6;&#x2014;&#x2014;&#x63A7;&#x5236;&#x8DEF;&#x5F84;&#x5BF9;&#x5E94;&#x7684;&#x663E;&#x793A;&#x7EC4;&#x4EF6;&#xFF0C;&#x53EF;&#x4EE5;&#x8FDB;&#x884C;&#x540C;&#x6B65;&#x52A0;&#x8F7D;&#x548C;&#x5F02;&#x6B65;&#x52A0;&#x8F7D;&#xFF0C;&lt;Route&gt;&#xFF1B;
&#xFF08;3&#xFF09;navigation&#x7EC4;&#x4EF6;&#x2014;&#x2014;&#x7528;&#x505A;&#x8DEF;&#x7531;&#x5207;&#x6362;&#x548C;&#x8DF3;&#x8F6C;&#xFF0C;&lt;Link&gt;&#xFF1B;

        BrowserRouter&#x4E0E;HashRouter&#x7684;&#x533A;&#x522B;&#xFF1A;
&#xFF08;1&#xFF09;&#x5E95;&#x5C42;&#x539F;&#x7406;&#x4E0D;&#x4E00;&#x6837;&#xFF1A;BrowserRouter&#x4F7F;&#x7528;&#x7684;&#x662F;H5&#x7684;history API&#xFF0C;&#x4E0D;&#x517C;&#x5BB9;IE9&#x53CA;&#x4EE5;&#x4E0B;&#x7248;&#x672C;&#xFF1B;HashRouter&#x4F7F;&#x7528;&#x7684;&#x662F;URL&#x7684;&#x54C8;&#x5E0C;&#x503C;&#xFF1B;
&#xFF08;2&#xFF09;path&#x8868;&#x73B0;&#x5F62;&#x5F0F;&#x4E0D;&#x4E00;&#x6837;&#xFF1A;BrowserRouter&#x7684;&#x8DEF;&#x5F84;&#x4E2D;&#x6CA1;&#x6709;#,&#x4F8B;&#x5982;&#xFF1A;localhost:3000/demo/test&#xFF1B;HashRouter&#x7684;&#x8DEF;&#x5F84;&#x5305;&#x542B;#,&#x4F8B;&#x5982;&#xFF1A;localhost:3000/#/demo/test&#xFF1B;
&#xFF08;3&#xFF09;&#x5237;&#x65B0;&#x540E;&#x5BF9;&#x8DEF;&#x7531;state&#x53C2;&#x6570;&#x7684;&#x5F71;&#x54CD;&#xFF1A;BrowserRouter&#x6CA1;&#x6709;&#x4EFB;&#x4F55;&#x5F71;&#x54CD;&#xFF0C;&#x56E0;&#x4E3A;state&#x4FDD;&#x5B58;&#x5728;history&#x5BF9;&#x8C61;&#x4E2D;&#xFF1B;HashRouter&#x5237;&#x65B0;&#x540E;&#x4F1A;&#x5BFC;&#x81F4;&#x8DEF;&#x7531;state&#x53C2;&#x6570;&#x7684;&#x4E22;&#x5931;&#xFF1B;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-react&#x6709;&#x54EA;&#x4E9B;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x7684;&#x624B;&#x6BB5;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-react&#x6709;&#x54EA;&#x4E9B;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x7684;&#x624B;&#x6BB5;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-react&#x6709;&#x54EA;&#x4E9B;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x7684;&#x624B;&#x6BB5;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-react&#x6709;&#x54EA;&#x4E9B;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x7684;&#x624B;&#x6BB5;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-react&#x6709;&#x54EA;&#x4E9B;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x7684;&#x624B;&#x6BB5;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605;&#x2605; React&#x6709;&#x54EA;&#x4E9B;&#x6027;&#x80FD;&#x4F18;&#x5316;&#x7684;&#x624B;&#x6BB5;&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
    1&#x3001;&#x4F7F;&#x7528;&#x7EAF;&#x7EC4;&#x4EF6;&#xFF1B;
    2&#x3001;&#x4F7F;&#x7528; React.memo &#x8FDB;&#x884C;&#x7EC4;&#x4EF6;&#x8BB0;&#x5FC6;&#xFF08;React.memo &#x662F;&#x4E00;&#x4E2A;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#xFF09;&#xFF0C;&#x5BF9;&#x4E8E;&#x76F8;&#x540C;&#x7684;&#x8F93;&#x5165;&#xFF0C;&#x4E0D;&#x91CD;&#x590D;&#x6267;&#x884C;&#xFF1B;
    3&#x3001;&#x5982;&#x679C;&#x662F;&#x7C7B;&#x7EC4;&#x4EF6;&#xFF0C;&#x4F7F;&#x7528; shouldComponentUpdate&#xFF08;&#x8FD9;&#x662F;&#x5728;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x7EC4;&#x4EF6;&#x4E4B;&#x524D;&#x89E6;&#x53D1;&#x7684;&#x5176;&#x4E2D;&#x4E00;&#x4E2A;&#x751F;&#x547D;&#x5468;&#x671F;&#x4E8B;&#x4EF6;&#xFF09;&#x751F;&#x547D;&#x5468;&#x671F;&#x4E8B;&#x4EF6;&#xFF0C;&#x53EF;&#x4EE5;&#x5229;&#x7528;&#x6B64;&#x4E8B;&#x4EF6;&#x6765;&#x51B3;&#x5B9A;&#x4F55;&#x65F6;&#x9700;&#x8981;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x7EC4;&#x4EF6;&#xFF1B;
    4&#x3001;&#x8DEF;&#x7531;&#x61D2;&#x52A0;&#x8F7D;&#xFF1B;
    5&#x3001;&#x4F7F;&#x7528; React Fragments &#x907F;&#x514D;&#x989D;&#x5916;&#x6807;&#x8BB0;&#xFF1B;
    6&#x3001;&#x4E0D;&#x8981;&#x4F7F;&#x7528;&#x5185;&#x8054;&#x51FD;&#x6570;&#x5B9A;&#x4E49;&#xFF08;&#x5982;&#x679C;&#x6211;&#x4EEC;&#x4F7F;&#x7528;&#x5185;&#x8054;&#x51FD;&#x6570;&#xFF0C;&#x5219;&#x6BCF;&#x6B21;&#x8C03;&#x7528;&#x201C;render&#x201D;&#x51FD;&#x6570;&#x65F6;&#x90FD;&#x4F1A;&#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x65B0;&#x7684;&#x51FD;&#x6570;&#x5B9E;&#x4F8B;&#xFF09;&#xFF1B;
    7&#x3001;&#x907F;&#x514D;&#x5728;Willxxx&#x7CFB;&#x5217;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x4E2D;&#x8FDB;&#x884C;&#x5F02;&#x6B65;&#x8BF7;&#x6C42;&#xFF0C;&#x64CD;&#x4F5C;dom&#x7B49;&#xFF1B;
    8&#x3001;&#x5982;&#x679C;&#x662F;&#x7C7B;&#x7EC4;&#x4EF6;&#xFF0C;&#x4E8B;&#x4EF6;&#x51FD;&#x6570;&#x5728;Constructor&#x4E2D;&#x7ED1;&#x5B9A;bind&#x6539;&#x53D8;this&#x6307;&#x5411;&#xFF1B;
    9&#x3001;&#x907F;&#x514D;&#x4F7F;&#x7528;&#x5185;&#x8054;&#x6837;&#x5F0F;&#x5C5E;&#x6027;&#xFF1B;
    10&#x3001;&#x4F18;&#x5316; React &#x4E2D;&#x7684;&#x6761;&#x4EF6;&#x6E32;&#x67D3;&#xFF1B;
    11&#x3001;&#x4E0D;&#x8981;&#x5728; render &#x65B9;&#x6CD5;&#x4E2D;&#x5BFC;&#x51FA;&#x6570;&#x636E;&#xFF1B;
    12&#x3001;&#x5217;&#x8868;&#x6E32;&#x67D3;&#x7684;&#x65F6;&#x5019;&#x52A0;key&#xFF1B;
    13&#x3001;&#x5728;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x4E2D;&#x4F7F;&#x7528;useCallback&#x548C;useMemo&#x6765;&#x8FDB;&#x884C;&#x7EC4;&#x4EF6;&#x4F18;&#x5316;&#xFF0C;&#x4F9D;&#x8D56;&#x6CA1;&#x6709;&#x53D8;&#x5316;&#x7684;&#x8BDD;&#xFF0C;&#x4E0D;&#x91CD;&#x590D;&#x6267;&#x884C;&#xFF1B;
    14&#x3001;&#x7C7B;&#x7EC4;&#x4EF6;&#x4E2D;&#x4F7F;&#x7528;immutable&#x5BF9;&#x8C61;&#xFF1B;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-react-hooks-&#x7528;&#x8FC7;&#x5417;&#xFF0C;&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x7528;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-react-hooks-&#x7528;&#x8FC7;&#x5417;&#xFF0C;&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x7528;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-react-hooks-&#x7528;&#x8FC7;&#x5417;&#xFF0C;&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x7528;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-react-hooks-&#x7528;&#x8FC7;&#x5417;&#xFF0C;&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x7528;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-react-hooks-&#x7528;&#x8FC7;&#x5417;&#xFF0C;&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x7528;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; React hooks &#x7528;&#x8FC7;&#x5417;&#xFF0C;&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x7528;&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
        Hooks &#x662F;React&#x5728;16.8&#x7248;&#x672C;&#x4E2D;&#x51FA;&#x7684;&#x4E00;&#x4E2A;&#x65B0;&#x529F;&#x80FD;&#xFF0C;&#x672C;&#x8D28;&#x662F;&#x4E00;&#x79CD;&#x51FD;&#x6570;&#xFF0C;&#x53EF;&#x4EE5;&#x5B9E;&#x73B0;&#x7EC4;&#x4EF6;&#x903B;&#x8F91;&#x590D;&#x7528;&#xFF0C;&#x8BA9;&#x6211;&#x4EEC;&#x5728;&#x51FD;&#x6570;&#x5F0F;&#x7EC4;&#x4EF6;&#x4E2D;&#x4F7F;&#x7528;&#x7C7B;&#x7EC4;&#x4EF6;&#x4E2D;&#x7684;&#x72B6;&#x6001;&#x3001;&#x751F;&#x547D;&#x5468;&#x671F;&#x7B49;&#x529F;&#x80FD;&#xFF0C;hooks&#x7684;&#x540D;&#x5B57;&#x90FD;&#x662F;&#x4EE5;use&#x5F00;&#x5934;&#x3002;

        react&#xFF1A;
        1&#x3001;useState&#x2014;&#x2014;&#x521B;&#x5EFA;&#x72B6;&#x6001;
                &#x63A5;&#x6536;&#x4E00;&#x4E2A;&#x53C2;&#x6570;&#x4F5C;&#x4E3A;&#x521D;&#x59CB;&#x503C;&#xFF1B;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;&#x6570;&#x7EC4;&#xFF0C;&#x7B2C;&#x4E00;&#x4E2A;&#x503C;&#x4E3A;&#x72B6;&#x6001;&#xFF0C;&#x7B2C;&#x4E8C;&#x4E2A;&#x503C;&#x4E3A;&#x6539;&#x53D8;&#x72B6;&#x6001;&#x7684;&#x51FD;&#x6570;
        2&#x3001;useEffect&#x2014;&#x2014;&#x526F;&#x4F5C;&#x7528;&#xFF08;&#x6570;&#x636E;&#x83B7;&#x53D6;&#x3001;dom&#x64CD;&#x4F5C;&#x5F71;&#x54CD;&#x9875;&#x9762;&#x2014;&#x2014;&#x5728;&#x6E32;&#x67D3;&#x7ED3;&#x675F;&#x4E4B;&#x540E;&#x6267;&#x884C;
                (1)&#x7B2C;&#x4E00;&#x4E2A;&#x53C2;&#x6570;&#x4E3A;&#x51FD;&#x6570;&#xFF0C;&#x7B2C;&#x4E8C;&#x4E2A;&#x53C2;&#x6570;&#x4E3A;&#x4F9D;&#x8D56;&#x5217;&#x8868;&#xFF0C;&#x53EA;&#x6709;&#x4F9D;&#x8D56;&#x66F4;&#x65B0;&#x65F6;&#x624D;&#x4F1A;&#x6267;&#x884C;&#x51FD;&#x6570;&#xFF1B;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;&#x51FD;&#x6570;&#xFF0C;&#x5F53;&#x9875;&#x9762;&#x5237;&#x65B0;&#x7684;&#x65F6;&#x5019;&#x5148;&#x6267;&#x884C;&#x8FD4;&#x56DE;&#x51FD;&#x6570;&#x518D;&#x6267;&#x884C;&#x53C2;&#x6570;&#x51FD;&#x6570;
                (2)&#x5982;&#x679C;&#x4E0D;&#x63A5;&#x53D7;&#x7B2C;&#x4E8C;&#x4E2A;&#x53C2;&#x6570;&#xFF0C;&#x90A3;&#x4E48;&#x5728;&#x7B2C;&#x4E00;&#x6B21;&#x6E32;&#x67D3;&#x5B8C;&#x6210;&#x4E4B;&#x540E;&#x548C;&#x6BCF;&#x6B21;&#x66F4;&#x65B0;&#x6E32;&#x67D3;&#x9875;&#x9762;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x90FD;&#x4F1A;&#x8C03;&#x7528;useEffect&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;
    3&#x3001;useRef
        &#x8FD4;&#x56DE;&#x4E00;&#x4E2A;&#x53EF;&#x53D8;&#x7684;ref&#x5BF9;&#x8C61;&#xFF0C;&#x6B64;&#x7D22;&#x5F15;&#x5728;&#x6574;&#x4E2A;&#x751F;&#x547D;&#x5468;&#x671F;&#x4E2D;&#x4FDD;&#x6301;&#x4E0D;&#x53D8;&#x3002;&#x53EF;&#x4EE5;&#x7528;&#x6765;&#x83B7;&#x53D6;&#x5143;&#x7D20;&#x6216;&#x7EC4;&#x4EF6;&#x7684;&#x5B9E;&#x4F8B;&#xFF0C;&#x7528;&#x6765;&#x505A;&#x8F93;&#x5165;&#x6846;&#x7684;&#x805A;&#x7126;&#x6216;&#x8005;&#x52A8;&#x753B;&#x7684;&#x89E6;&#x53D1;&#x3002;    
    4&#x3001;useMemo&#x2014;&#x2014;&#x4F18;&#x5316;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x4E2D;&#x7684;&#x529F;&#x80FD;&#x51FD;&#x6570;&#x2014;&#x2014;&#x5728;&#x6E32;&#x67D3;&#x671F;&#x95F4;&#x6267;&#x884C;
       &#xFF08;1&#xFF09;&#x63A5;&#x6536;&#x4E00;&#x4E2A;&#x51FD;&#x6570;&#x4F5C;&#x4E3A;&#x53C2;&#x6570;&#xFF0C;&#x540C;&#x6837;&#x63A5;&#x6536;&#x7B2C;&#x4E8C;&#x4E2A;&#x53C2;&#x6570;&#x4F5C;&#x4E3A;&#x4F9D;&#x8D56;&#x5217;&#x8868;&#xFF0C;&#x8FD4;&#x56DE;&#x503C;&#x53EF;&#x4EE5;&#x662F;&#x4EFB;&#x4F55;&#xFF0C;&#x51FD;&#x6570;&#x3001;&#x5BF9;&#x8C61;&#x7B49;&#x90FD;&#x53EF;&#x4EE5;
       &#xFF08;2&#xFF09;&#x8FD9;&#x79CD;&#x4F18;&#x5316;&#x6709;&#x52A9;&#x4E8E;&#x907F;&#x514D;&#x5728;&#x6BCF;&#x6B21;&#x6E32;&#x67D3;&#x65F6;&#x90FD;&#x8FDB;&#x884C;&#x9AD8;&#x5F00;&#x9500;&#x7684;&#x8BA1;&#x7B97;&#xFF0C;&#x4EC5;&#x4F1A;&#x5728;&#x67D0;&#x4E2A;&#x4F9D;&#x8D56;&#x9879;&#x6539;&#x53D8;&#x65F6;&#x624D;&#x91CD;&#x65B0;&#x8BA1;&#x7B97;            
        5&#x3001;useContext&#x2014;&#x2014;&#x83B7;&#x53D6;&#x4E0A;&#x4E0B;&#x6587;&#x6CE8;&#x5165;&#x7684;&#x503C;    
                (1)&#x63A5;&#x53D7;&#x4E00;&#x4E2A;context &#x5BF9;&#x8C61;&#xFF0C;&#x5E76;&#x8FD4;&#x56DE;&#x8BE5;&#x5BF9;&#x8C61;&lt;MyContext.Provider&gt; &#x5143;&#x7D20;&#x7684; value&#x503C;&#xFF1B;
                        const value = useContext(MyContext)&#xFF1B;        
        6&#x3001;useLayoutEffect&#x2014;&#x2014;&#x6709;DOM&#x64CD;&#x4F5C;&#x7684;&#x526F;&#x4F5C;&#x7528;&#x2014;&#x2014;&#x5728;DOM&#x66F4;&#x65B0;&#x4E4B;&#x540E;&#x6267;&#x884C;
                &#x548C;useEffet&#x7C7B;&#x4F3C;&#xFF0C;&#x4F46;&#x662F;&#x6267;&#x884C;&#x65F6;&#x673A;&#x4E0D;&#x540C;&#xFF0C;useLayoutEffect&#x5728;DOM&#x66F4;&#x65B0;&#x4E4B;&#x540E;&#x6267;&#x884C;&#xFF0C;useEffect&#x5728;render&#x6E32;&#x67D3;&#x7ED3;&#x675F;&#x540E;&#x6267;&#x884C;&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x8BF4;useLayoutEffect&#x6BD4;useEffect&#x5148;&#x6267;&#x884C;&#xFF0C;&#x8FD9;&#x662F;&#x56E0;&#x4E3A;DOM&#x66F4;&#x65B0;&#x4E4B;&#x540E;&#xFF0C;&#x6E32;&#x67D3;&#x624D;&#x7ED3;&#x675F;&#x6216;&#x8005;&#x6E32;&#x67D3;&#x8FD8;&#x4F1A;&#x7ED3;&#x675F;         
        7&#x3001;useCallback&#x2014;&#x2014;&#x4E0E;useMemo&#x7C7B;&#x4F3C;
                useMemo&#x4E0E;useCallback&#x76F8;&#x540C;&#xFF0C;&#x63A5;&#x6536;&#x4E00;&#x4E2A;&#x51FD;&#x6570;&#x4F5C;&#x4E3A;&#x53C2;&#x6570;&#xFF0C;&#x4E5F;&#x540C;&#x6837;&#x63A5;&#x6536;&#x7B2C;&#x4E8C;&#x4E2A;&#x53C2;&#x6570;&#x4F5C;&#x4E3A;&#x4F9D;&#x8D56;&#x5217;&#x8868;&#xFF1B;useCallback&#x662F;&#x5BF9;&#x4F20;&#x8FC7;&#x6765;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#x4F18;&#x5316;&#xFF0C;&#x8FD4;&#x56DE;&#x7684;&#x662F;&#x4E00;&#x4E2A;&#x51FD;&#x6570;

react-router:
        &#x88AB;route&#x5305;&#x88F9;&#x7684;&#x7EC4;&#x4EF6;&#xFF0C;&#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x4F7F;&#x7528;props&#x8FDB;&#x884C;&#x8DEF;&#x7531;&#x76F8;&#x5173;&#x64CD;&#x4F5C;&#xFF0C;&#x4F46;&#x662F;&#x6CA1;&#x6709;&#x88AB;route&#x5305;&#x88F9;&#x7684;&#x7EC4;&#x4EF6;&#x53EA;&#x80FD;&#x7528;withRouter&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x4FEE;&#x9970;&#x6216;&#x8005;&#x4F7F;&#x7528;hooks&#x8FDB;&#x884C;&#x64CD;&#x4F5C;
        1&#x3001;useHistory&#x2014;&#x2014;&#x8DF3;&#x8F6C;&#x8DEF;&#x7531;
        2&#x3001;useLocation&#x2014;&#x2014;&#x5F97;&#x5230;url&#x5BF9;&#x8C61;
        3&#x3001;useParams&#x2014;&#x2014;&#x5F97;&#x5230;url&#x4E0A;&#x7684;&#x53C2;&#x6570;

react-redux:
        1&#x3001;useSelector&#x2014;&#x2014;&#x5171;&#x4EAB;&#x72B6;&#x6001;&#x2014;&#x2014;&#x4ECE;redux&#x7684;store&#x4E2D;&#x63D0;&#x53D6;&#x6570;&#x636E;
        2&#x3001;useDispatch&#x2014;&#x2014;&#x5171;&#x4EAB;&#x72B6;&#x6001;&#x2014;&#x2014;&#x8FD4;&#x56DE;redux&#x7684;store&#x4E2D;&#x5BF9;dispatch&#x7684;&#x5F15;&#x7528;    
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-&#x865A;&#x62DF;dom&#x7684;&#x4F18;&#x52A3;&#x5982;&#x4F55;&#xFF1F;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-&#x865A;&#x62DF;dom&#x7684;&#x4F18;&#x52A3;&#x5982;&#x4F55;&#xFF1F;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x865A;&#x62DF;dom&#x7684;&#x4F18;&#x52A3;&#x5982;&#x4F55;&#xFF1F;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-&#x865A;&#x62DF;dom&#x7684;&#x4F18;&#x52A3;&#x5982;&#x4F55;&#xFF1F;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x865A;&#x62DF;dom&#x7684;&#x4F18;&#x52A3;&#x5982;&#x4F55;&#xFF1F;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; &#x865A;&#x62DF;DOM&#x7684;&#x4F18;&#x52A3;&#x5982;&#x4F55;&#xFF1F;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
        &#x865A;&#x62DF;dom&#x662F;&#x7528;js&#x6A21;&#x62DF;&#x4E00;&#x9897;dom&#x6811;,&#x653E;&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x5185;&#x5B58;&#x4E2D;&#xFF0C;&#x76F8;&#x5F53;&#x4E8E;&#x5728;js&#x548C;&#x771F;&#x5B9E;dom&#x4E2D;&#x52A0;&#x4E86;&#x4E00;&#x4E2A;&#x7F13;&#x5B58;&#xFF0C;&#x5229;&#x7528;dom diff&#x7B97;&#x6CD5;&#x907F;&#x514D;&#x4E86;&#x6CA1;&#x6709;&#x5FC5;&#x8981;&#x7684;dom&#x64CD;&#x4F5C;&#xFF0C;&#x4ECE;&#x800C;&#x63D0;&#x9AD8;&#x6027;&#x80FD;&#x3002;
        &#x4F18;&#x70B9;&#xFF1A;
        &#xFF08;1&#xFF09;&#x865A;&#x62DF;DOM&#x5177;&#x6709;&#x6279;&#x5904;&#x7406;&#x548C;&#x9AD8;&#x6548;&#x7684;Diff&#x7B97;&#x6CD5;,&#x6700;&#x7EC8;&#x8868;&#x73B0;&#x5728;DOM&#x4E0A;&#x7684;&#x4FEE;&#x6539;&#x53EA;&#x662F;&#x53D8;&#x66F4;&#x7684;&#x90E8;&#x5206;&#xFF0C;&#x53EF;&#x4EE5;&#x4FDD;&#x8BC1;&#x975E;&#x5E38;&#x9AD8;&#x6548;&#x7684;&#x6E32;&#x67D3;,&#x4F18;&#x5316;&#x6027;&#x80FD;&#xFF1B;
        &#xFF08;2&#xFF09;&#x865A;&#x62DF;DOM&#x4E0D;&#x4F1A;&#x7ACB;&#x9A6C;&#x8FDB;&#x884C;&#x6392;&#x7248;&#x4E0E;&#x91CD;&#x7ED8;&#x64CD;&#x4F5C;&#xFF0C;&#x5BF9;&#x865A;&#x62DF;DOM&#x8FDB;&#x884C;&#x9891;&#x7E41;&#x4FEE;&#x6539;&#xFF0C;&#x6700;&#x540E;&#x4E00;&#x6B21;&#x6027;&#x6BD4;&#x8F83;&#x5E76;&#x4FEE;&#x6539;&#x771F;&#x5B9E;DOM&#x4E2D;&#x9700;&#x8981;&#x6539;&#x7684;&#x90E8;&#x5206;&#xFF1B;
        &#xFF08;3&#xFF09;&#x865A;&#x62DF; DOM &#x6709;&#x6548;&#x964D;&#x4F4E;&#x5927;&#x9762;&#x79EF;&#x771F;&#x5B9E; DOM &#x7684;&#x91CD;&#x7ED8;&#x4E0E;&#x6392;&#x7248;&#xFF0C;&#x56E0;&#x4E3A;&#x6700;&#x7EC8;&#x4E0E;&#x771F;&#x5B9E; DOM &#x6BD4;&#x8F83;&#x5DEE;&#x5F02;&#xFF0C;&#x53EF;&#x4EE5;&#x53EA;&#x6E32;&#x67D3;&#x5C40;&#x90E8;&#xFF1B;
        &#x7F3A;&#x70B9;&#xFF1A;
        &#xFF08;1&#xFF09;&#x9996;&#x6B21;&#x6E32;&#x67D3;&#x5927;&#x91CF;DOM&#x65F6;&#xFF0C;&#x7531;&#x4E8E;&#x591A;&#x4E86;&#x4E00;&#x5C42;&#x865A;&#x62DF;DOM&#x7684;&#x8BA1;&#x7B97;&#xFF0C;&#x4F1A;&#x6BD4;innerHTML&#x63D2;&#x5165;&#x6162;&#xFF1B;

        React&#x7EC4;&#x4EF6;&#x7684;&#x6E32;&#x67D3;&#x8FC7;&#x7A0B;&#xFF1A;
        &#xFF08;1&#xFF09;&#x4F7F;&#x7528;JSX&#x7F16;&#x5199;React&#x7EC4;&#x4EF6;&#x540E;&#x6240;&#x6709;&#x7684;JSX&#x4EE3;&#x7801;&#x4F1A;&#x901A;&#x8FC7;Babel&#x8F6C;&#x5316;&#x4E3A; React.createElement&#x6267;&#x884C;;
        &#xFF08;2&#xFF09;createElement&#x51FD;&#x6570;&#x5BF9; key&#x548C; ref&#x7B49;&#x7279;&#x6B8A;&#x7684; props&#x8FDB;&#x884C;&#x5904;&#x7406;&#xFF0C;&#x5E76;&#x83B7;&#x53D6; defaultProps&#x5BF9;&#x9ED8;&#x8BA4; props&#x8FDB;&#x884C;&#x8D4B;&#x503C;&#xFF0C;&#x5E76;&#x4E14;&#x5BF9;&#x4F20;&#x5165;&#x7684;&#x5B50;&#x8282;&#x70B9;&#x8FDB;&#x884C;&#x5904;&#x7406;&#xFF0C;&#x6700;&#x7EC8;&#x6784;&#x9020;&#x6210;&#x4E00;&#x4E2A; ReactElement&#x5BF9;&#x8C61;&#xFF08;&#x6240;&#x8C13;&#x7684;&#x865A;&#x62DF; DOM&#xFF09;&#x3002;
        &#xFF08;3&#xFF09;ReactDOM.render&#x5C06;&#x751F;&#x6210;&#x597D;&#x7684;&#x865A;&#x62DF; DOM&#x6E32;&#x67D3;&#x5230;&#x6307;&#x5B9A;&#x5BB9;&#x5668;&#x4E0A;&#xFF0C;&#x5176;&#x4E2D;&#x91C7;&#x7528;&#x4E86;&#x6279;&#x5904;&#x7406;&#x3001;&#x4E8B;&#x52A1;&#x7B49;&#x673A;&#x5236;&#x5E76;&#x4E14;&#x5BF9;&#x7279;&#x5B9A;&#x6D4F;&#x89C8;&#x5668;&#x8FDB;&#x884C;&#x4E86;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF0C;&#x6700;&#x7EC8;&#x8F6C;&#x6362;&#x4E3A;&#x771F;&#x5B9E; DOM&#x3002;

        &#x865A;&#x62DF;DOM&#x7684;&#x7EC4;&#x6210;&#x2014;&#x2014;ReactElementelement&#x5BF9;&#x8C61;&#x7ED3;&#x6784;&#xFF1A;
        &#xFF08;1&#xFF09;type&#xFF1A;&#x5143;&#x7D20;&#x7684;&#x7C7B;&#x578B;&#xFF0C;&#x53EF;&#x4EE5;&#x662F;&#x539F;&#x751F;html&#x7C7B;&#x578B;&#xFF08;&#x5B57;&#x7B26;&#x4E32;&#xFF09;&#xFF0C;&#x6216;&#x8005;&#x81EA;&#x5B9A;&#x4E49;&#x7EC4;&#x4EF6;&#xFF08;&#x51FD;&#x6570;&#x6216;class&#xFF09;
        &#xFF08;2&#xFF09;key&#xFF1A;&#x7EC4;&#x4EF6;&#x7684;&#x552F;&#x4E00;&#x6807;&#x8BC6;&#xFF0C;&#x7528;&#x4E8E;Diff&#x7B97;&#x6CD5;&#xFF0C;&#x4E0B;&#x9762;&#x4F1A;&#x8BE6;&#x7EC6;&#x4ECB;&#x7ECD;
        &#xFF08;3&#xFF09;ref&#xFF1A;&#x7528;&#x4E8E;&#x8BBF;&#x95EE;&#x539F;&#x751F;dom&#x8282;&#x70B9;
        &#xFF08;4&#xFF09;props&#xFF1A;&#x4F20;&#x5165;&#x7EC4;&#x4EF6;&#x7684;props&#xFF0C;chidren&#x662F;props&#x4E2D;&#x7684;&#x4E00;&#x4E2A;&#x5C5E;&#x6027;&#xFF0C;&#x5B83;&#x5B58;&#x50A8;&#x4E86;&#x5F53;&#x524D;&#x7EC4;&#x4EF6;&#x7684;&#x5B69;&#x5B50;&#x8282;&#x70B9;&#xFF0C;&#x53EF;&#x4EE5;&#x662F;&#x6570;&#x7EC4;&#xFF08;&#x591A;&#x4E2A;&#x5B69;&#x5B50;&#x8282;&#x70B9;&#xFF09;&#x6216;&#x5BF9;&#x8C61;&#xFF08;&#x53EA;&#x6709;&#x4E00;&#x4E2A;&#x5B69;&#x5B50;&#x8282;&#x70B9;&#xFF09;
        &#xFF08;5&#xFF09;owner&#xFF1A;&#x5F53;&#x524D;&#x6B63;&#x5728;&#x6784;&#x5EFA;&#x7684;Component&#x6240;&#x5C5E;&#x7684;Component
        &#xFF08;6&#xFF09;self&#xFF1A;&#xFF08;&#x975E;&#x751F;&#x4EA7;&#x73AF;&#x5883;&#xFF09;&#x6307;&#x5B9A;&#x5F53;&#x524D;&#x4F4D;&#x4E8E;&#x54EA;&#x4E2A;&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;
        &#xFF08;7&#xFF09;_source&#xFF1A;&#xFF08;&#x975E;&#x751F;&#x4EA7;&#x73AF;&#x5883;&#xFF09;&#x6307;&#x5B9A;&#x8C03;&#x8BD5;&#x4EE3;&#x7801;&#x6765;&#x81EA;&#x7684;&#x6587;&#x4EF6;(fileName)&#x548C;&#x4EE3;&#x7801;&#x884C;&#x6570;(lineNumber)
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-react-&#x548C;-vue-&#x7684;-diff-&#x65F6;&#x95F4;&#x590D;&#x6742;&#x5EA6;&#x4ECE;-on3-&#x4F18;&#x5316;&#x5230;-on-&#xFF0C;&#x90A3;&#x4E48;-on3-&#x548C;-on-&#x662F;&#x5982;&#x4F55;&#x8BA1;&#x7B97;&#x51FA;&#x6765;&#x7684;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-react-&#x548C;-vue-&#x7684;-diff-&#x65F6;&#x95F4;&#x590D;&#x6742;&#x5EA6;&#x4ECE;-on3-&#x4F18;&#x5316;&#x5230;-on-&#xFF0C;&#x90A3;&#x4E48;-on3-&#x548C;-on-&#x662F;&#x5982;&#x4F55;&#x8BA1;&#x7B97;&#x51FA;&#x6765;&#x7684;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-react-&#x548C;-vue-&#x7684;-diff-&#x65F6;&#x95F4;&#x590D;&#x6742;&#x5EA6;&#x4ECE;-on3-&#x4F18;&#x5316;&#x5230;-on-&#xFF0C;&#x90A3;&#x4E48;-on3-&#x548C;-on-&#x662F;&#x5982;&#x4F55;&#x8BA1;&#x7B97;&#x51FA;&#x6765;&#x7684;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-react-&#x548C;-vue-&#x7684;-diff-&#x65F6;&#x95F4;&#x590D;&#x6742;&#x5EA6;&#x4ECE;-on3-&#x4F18;&#x5316;&#x5230;-on-&#xFF0C;&#x90A3;&#x4E48;-on3-&#x548C;-on-&#x662F;&#x5982;&#x4F55;&#x8BA1;&#x7B97;&#x51FA;&#x6765;&#x7684;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-react-&#x548C;-vue-&#x7684;-diff-&#x65F6;&#x95F4;&#x590D;&#x6742;&#x5EA6;&#x4ECE;-on3-&#x4F18;&#x5316;&#x5230;-on-&#xFF0C;&#x90A3;&#x4E48;-on3-&#x548C;-on-&#x662F;&#x5982;&#x4F55;&#x8BA1;&#x7B97;&#x51FA;&#x6765;&#x7684;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; React &#x548C; Vue &#x7684; diff &#x65F6;&#x95F4;&#x590D;&#x6742;&#x5EA6;&#x4ECE; O(n^3) &#x4F18;&#x5316;&#x5230; O(n) &#xFF0C;&#x90A3;&#x4E48; O(n^3) &#x548C; O(n) &#x662F;&#x5982;&#x4F55;&#x8BA1;&#x7B97;&#x51FA;&#x6765;&#x7684;&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
        react&#x7684;diff&#x7B97;&#x6CD5;&#x53EA;&#x9700;&#x8981;O(n)&#xFF0C;&#x8FD9;&#x662F;&#x56E0;&#x4E3A;react&#x5BF9;&#x6811;&#x8282;&#x70B9;&#x7684;&#x6BD4;&#x8F83;&#x505A;&#x4E86;&#x4E00;&#x4E9B;&#x524D;&#x63D0;&#x5047;&#x8BBE;&#xFF0C;&#x9650;&#x5B9A;&#x6B7B;&#x4E86;&#x4E00;&#x4E9B;&#x4E1C;&#x897F;&#xFF0C;&#x4E0D;&#x505A;&#x8FC7;&#x4E8E;&#x590D;&#x6742;&#x7684;&#x8BA1;&#x7B97;&#x64CD;&#x4F5C;&#xFF0C;&#x6240;&#x4EE5;&#x964D;&#x4F4E;&#x4E86;&#x590D;&#x6742;&#x5EA6;&#x3002;react&#x548C;vue&#x505A;&#x4E86;&#x4EE5;&#x4E0B;&#x7684;&#x5047;&#x8BBE;&#xFF0C;&#x8FD9;&#x6837;&#x7684;&#x8BDD;diff&#x8FD0;&#x7B97;&#x65F6;&#x53EA;&#x8FDB;&#x884C;&#x540C;&#x5C42;&#x6BD4;&#x8F83;&#xFF0C;&#x6BCF;&#x4E00;&#x4E2A;&#x8282;&#x70B9;&#x53EA;&#x904D;&#x5386;&#x4E86;&#x4E00;&#x6B21;&#x3002;
       &#xFF08;1&#xFF09;Web UI&#x4E2D;DOM&#x8282;&#x70B9;&#x8DE8;&#x5C42;&#x7EA7;&#x7684;&#x79FB;&#x52A8;&#x64CD;&#x4F5C;&#x7279;&#x522B;&#x5C11;&#xFF0C;&#x53EF;&#x4EE5;&#x5FFD;&#x7565;&#x4E0D;&#x8BA1;&#xFF1B;
        &#xFF08;2&#xFF09;&#x62E5;&#x6709;&#x76F8;&#x540C;&#x7C7B;&#x7684;&#x4E24;&#x4E2A;&#x7EC4;&#x4EF6;&#x5C06;&#x4F1A;&#x751F;&#x6210;&#x76F8;&#x4F3C;&#x7684;&#x6811;&#x5F62;&#x7ED3;&#x6784;&#xFF0C;&#x62E5;&#x6709;&#x4E0D;&#x540C;&#x7C7B;&#x7684;&#x4E24;&#x4E2A;&#x7EC4;&#x4EF6;&#x5C06;&#x4F1A;&#x751F;&#x6210;&#x4E0D;&#x540C;&#x7684;&#x6811;&#x5F62;&#x7ED3;&#x6784;&#xFF1B;
        &#xFF08;3&#xFF09;&#x5BF9;&#x4E8E;&#x540C;&#x4E00;&#x5C42;&#x7EA7;&#x7684;&#x4E00;&#x7EC4;&#x5B50;&#x8282;&#x70B9;&#xFF0C;&#x5B83;&#x4EEC;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x552F;&#x4E00; id &#x8FDB;&#x884C;&#x533A;&#x5206;&#x3002;

        &#x800C;&#x4F20;&#x7EDF;&#x7684;diff&#x8FD0;&#x7B97;&#x65F6;&#x95F4;&#x590D;&#x6742;&#x5EA6;&#x4E3A;O(n^3)&#xFF0C;&#x8FD9;&#x662F;&#x56E0;&#x4E3A;&#x4F20;&#x7EDF;&#x7684;&#x6811;&#x8282;&#x70B9;&#x8981;&#x505A;&#x975E;&#x5E38;&#x5B8C;&#x6574;&#x7684;&#x68C0;&#x67E5;&#xFF0C;&#x9996;&#x5148;&#x9700;&#x8981;&#x8282;&#x70B9;&#x4E4B;&#x95F4;&#x9700;&#x8981;&#x4E24;&#x4E24;&#x6BD4;&#x8F83;&#xFF0C;&#x627E;&#x5230;&#x6240;&#x6709;&#x5DEE;&#x5F02;&#xFF0C;&#x8FD9;&#x4E2A;&#x5BF9;&#x6BD4;&#x8FC7;&#x7A0B;&#x65F6;&#x95F4;&#x590D;&#x6742;&#x5EA6;&#x4E3A;O(n^2)&#xFF0C;&#x627E;&#x5230;&#x5DEE;&#x5F02;&#x540E;&#x8FD8;&#x8981;&#x8BA1;&#x7B97;&#x51FA;&#x6700;&#x5C0F;&#x7684;&#x8F6C;&#x6362;&#x65B9;&#x5F0F;&#xFF0C;&#x6700;&#x7EC8;&#x590D;&#x6742;&#x5EA6;&#x4E3A;O(n^3)
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x804A;&#x804A;-redux-&#x548C;-vuex-&#x7684;&#x8BBE;&#x8BA1;&#x601D;&#x60F3;"><a name="&#x2605;&#x2605;&#x2605;-&#x804A;&#x804A;-redux-&#x548C;-vuex-&#x7684;&#x8BBE;&#x8BA1;&#x601D;&#x60F3;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x804A;&#x804A;-redux-&#x548C;-vuex-&#x7684;&#x8BBE;&#x8BA1;&#x601D;&#x60F3;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x804A;&#x804A;-redux-&#x548C;-vuex-&#x7684;&#x8BBE;&#x8BA1;&#x601D;&#x60F3;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x804A;&#x804A;-redux-&#x548C;-vuex-&#x7684;&#x8BBE;&#x8BA1;&#x601D;&#x60F3;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x804A;&#x804A; Redux &#x548C; Vuex &#x7684;&#x8BBE;&#x8BA1;&#x601D;&#x60F3;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
        Flux&#x7684;&#x6838;&#x5FC3;&#x601D;&#x60F3;&#x5C31;&#x662F;&#x6570;&#x636E;&#x548C;&#x903B;&#x8F91;&#x6C38;&#x8FDC;&#x5355;&#x5411;&#x6D41;&#x52A8;&#xFF0C;&#x7531;&#x4E09;&#x5927;&#x90E8;&#x5206;&#x7EC4;&#x6210; dispatcher(&#x8D1F;&#x8D23;&#x5206;&#x53D1;&#x4E8B;&#x4EF6;), store(&#x8D1F;&#x8D23;&#x4FDD;&#x5B58;&#x6570;&#x636E;&#xFF0C;&#x540C;&#x65F6;&#x54CD;&#x5E94;&#x4E8B;&#x4EF6;&#x5E76;&#x66F4;&#x65B0;&#x6570;&#x636E;)&#x548C; view(&#x8D1F;&#x8D23;&#x8BA2;&#x9605;store&#x4E2D;&#x7684;&#x6570;&#x636E;&#xFF0C;&#x5E76;&#x4F7F;&#x7528;&#x8FD9;&#x4E9B;&#x6570;&#x636E;&#x6E32;&#x67D3;&#x76F8;&#x5E94;&#x7684;&#x9875;&#x9762;)&#xFF0C;Redux&#x548C;Vuex&#x662F;flux&#x601D;&#x60F3;&#x7684;&#x5177;&#x4F53;&#x5B9E;&#x73B0;&#xFF0C;&#x90FD;&#x662F;&#x7528;&#x6765;&#x505A;&#x72B6;&#x6001;&#x7BA1;&#x7406;&#x7684;&#x5DE5;&#x5177;&#xFF0C;Redux&#x4E3B;&#x8981;&#x5728;react&#x4E2D;&#x4F7F;&#x7528;&#xFF0C;Vuex&#x4E3B;&#x8981;&#x5728;vue&#x4E2D;&#x4F7F;&#x7528;&#x3002;

        Redux&#x8BBE;&#x8BA1;&#x548C;&#x4F7F;&#x7528;&#x7684;&#x4E09;&#x5927;&#x539F;&#x5219;&#xFF1A;
      &#xFF08;1&#xFF09;&#x5355;&#x4E00;&#x7684;&#x6570;&#x636E;&#x6E90;&#xFF1A;&#x6574;&#x4E2A;&#x5E94;&#x7528;&#x7684; state&#x88AB;&#x50A8;&#x5B58;&#x5728;&#x552F;&#x4E00;&#x4E00;&#x4E2A; store&#x4E2D;&#xFF1B;
      &#xFF08;2&#xFF09;&#x72B6;&#x6001;&#x662F;&#x53EA;&#x8BFB;&#x7684;&#xFF1A;Store.state&#x4E0D;&#x80FD;&#x76F4;&#x63A5;&#x4FEE;&#x6539;&#xFF08;&#x53EA;&#x8BFB;&#xFF09;&#xFF0C;&#x5FC5;&#x987B;&#x8C03;&#x7528;dispatch(action) =&gt; store.reducer =&gt; return newState&#xFF1B;action&#x662F;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#xFF0C;&#x6709;type&#xFF08;&#x64CD;&#x4F5C;&#x7C7B;&#x578B;&#xFF09;&#x548C;payload&#xFF08;&#x65B0;&#x503C;&#xFF09;&#x5C5E;&#x6027;&#xFF1B;
      &#xFF08;3&#xFF09;&#x72B6;&#x6001;&#x4FEE;&#x6539;&#x5747;&#x7531;&#x7EAF;&#x51FD;&#x6570;&#x5B8C;&#x6210;&#xFF1A;&#x5728;Redux&#x4E2D;&#xFF0C;&#x901A;&#x8FC7;&#x7EAF;&#x51FD;&#x6570;reducer&#x6765;&#x786E;&#x5B9A;&#x72B6;&#x6001;&#x7684;&#x6539;&#x53D8;&#xFF0C;&#x56E0;&#x4E3A;reducer&#x662F;&#x7EAF;&#x51FD;&#x6570;&#xFF0C;&#x6240;&#x4EE5;&#x76F8;&#x540C;&#x7684;&#x8F93;&#x5165;&#xFF0C;&#x4E00;&#x5B9A;&#x4F1A;&#x5F97;&#x5230;&#x76F8;&#x540C;&#x7684;&#x8F93;&#x51FA;&#xFF0C;&#x540C;&#x65F6;&#x4E5F;&#x4E0D;&#x652F;&#x6301;&#x5F02;&#x6B65;&#xFF1B;&#x8FD4;&#x56DE;&#x503C;&#x662F;&#x4E00;&#x4E2A;&#x5168;&#x65B0;&#x7684;state&#xFF1B;

        vuex&#x7531;State + Muatations(commit) + Actions(dispatch) &#x7EC4;&#x6210;&#xFF1A;
      &#xFF08;1&#xFF09;&#x5168;&#x5C40;&#x53EA;&#x6709;&#x4E00;&#x4E2A;Store&#x5B9E;&#x4F8B;&#xFF08;&#x5355;&#x4E00;&#x6570;&#x636E;&#x6E90;&#xFF09;&#xFF1B;
      &#xFF08;2&#xFF09;Mutations&#x5FC5;&#x987B;&#x662F;&#x540C;&#x6B65;&#x4E8B;&#x52A1;&#xFF0C;&#x4E0D;&#x540C;&#x6B65;&#x4FEE;&#x6539;&#x7684;&#x8BDD;&#xFF0C;&#x4F1A;&#x5F88;&#x96BE;&#x8C03;&#x8BD5;&#xFF0C;&#x4E0D;&#x77E5;&#x9053;&#x6539;&#x53D8;&#x4EC0;&#x4E48;&#x65F6;&#x5019;&#x53D1;&#x751F;&#xFF0C;&#x4E5F;&#x5F88;&#x96BE;&#x786E;&#x5B9A;&#x5148;&#x540E;&#x987A;&#x5E8F;&#xFF0C;A&#x3001;B&#x4E24;&#x4E2A;mutation&#xFF0C;&#x8C03;&#x7528;&#x987A;&#x5E8F;&#x53EF;&#x80FD;&#x662F;A -&gt; B&#xFF0C;&#x4F46;&#x662F;&#x6700;&#x7EC8;&#x6539;&#x53D8; State&#x7684;&#x7ED3;&#x679C;&#x53EF;&#x80FD;&#x662F;B -&gt; A&#xFF1B;
      &#xFF08;3&#xFF09;Actions&#x8D1F;&#x8D23;&#x5904;&#x7406;&#x5F02;&#x6B65;&#x4E8B;&#x52A1;&#xFF0C;&#x7136;&#x540E;&#x5728;&#x5F02;&#x6B65;&#x56DE;&#x8C03;&#x4E2D;&#x89E6;&#x53D1;&#x4E00;&#x4E2A;&#x6216;&#x591A;&#x4E2A;mutations&#xFF0C;&#x4E5F;&#x53EF;&#x4EE5;&#x5728;&#x4E1A;&#x52A1;&#x4EE3;&#x7801;&#x4E2D;&#x5904;&#x7406;&#x5F02;&#x6B65;&#x4E8B;&#x52A1;&#xFF0C;&#x7136;&#x540E;&#x5728;&#x56DE;&#x8C03;&#x4E2D;&#x540C;&#x6837;&#x64CD;&#x4F5C;&#xFF1B;
      &#xFF08;4&#xFF09;&#x6A21;&#x5757;&#x5316;&#x901A;&#x8FC7;module&#x65B9;&#x5F0F;&#x6765;&#x5904;&#x7406;&#xFF0C;&#x8FD9;&#x4E2A;&#x8DDF;Redux-combineReducer&#x7C7B;&#x4F3C;&#xFF0C;&#x5728;&#x5E94;&#x7528;&#x4E2D;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;namespaceHelper&#x6765;&#x7B80;&#x5316;&#x4F7F;&#x7528;&#xFF1B;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x4E0D;&#x540C;&#x7EC4;&#x4EF6;&#x4E4B;&#x95F4;&#x5982;&#x4F55;&#x505A;&#x5230;&#x6570;&#x636E;&#x4EA4;&#x4E92;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x4E0D;&#x540C;&#x7EC4;&#x4EF6;&#x4E4B;&#x95F4;&#x5982;&#x4F55;&#x505A;&#x5230;&#x6570;&#x636E;&#x4EA4;&#x4E92;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x4E0D;&#x540C;&#x7EC4;&#x4EF6;&#x4E4B;&#x95F4;&#x5982;&#x4F55;&#x505A;&#x5230;&#x6570;&#x636E;&#x4EA4;&#x4E92;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x4E0D;&#x540C;&#x7EC4;&#x4EF6;&#x4E4B;&#x95F4;&#x5982;&#x4F55;&#x505A;&#x5230;&#x6570;&#x636E;&#x4EA4;&#x4E92;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x4E0D;&#x540C;&#x7EC4;&#x4EF6;&#x4E4B;&#x95F4;&#x5982;&#x4F55;&#x505A;&#x5230;&#x6570;&#x636E;&#x4EA4;&#x4E92;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; React&#x4E2D;&#x4E0D;&#x540C;&#x7EC4;&#x4EF6;&#x4E4B;&#x95F4;&#x5982;&#x4F55;&#x505A;&#x5230;&#x6570;&#x636E;&#x4EA4;&#x4E92;&#xFF1F;</p></h3>
<h3 id="&#x2605;&#x2605;&#x2605;-react&#x4E2D;refs&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-react&#x4E2D;refs&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x4E2D;refs&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-react&#x4E2D;refs&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x4E2D;refs&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; React&#x4E2D;refs&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;</p></h3>
<pre><code class="lang-jsx"><span class="hljs-comment">// ref&#x662F;React&#x63D0;&#x4F9B;&#x7684;&#x7528;&#x6765;&#x64CD;&#x7EB5;React&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#x6216;&#x8005;DOM&#x5143;&#x7D20;&#x7684;&#x63A5;&#x53E3;&#x3002;&#x4E3B;&#x8981;&#x7528;&#x6765;&#x505A;&#x6587;&#x672C;&#x6846;&#x7684;&#x805A;&#x7126;&#x3001;&#x89E6;&#x53D1;&#x5F3A;&#x5236;&#x52A8;&#x753B;&#x7B49;&#xFF1B;</span>
<span class="hljs-comment">// &#x7C7B;&#x7EC4;&#x4EF6;</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Foo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
      <span class="hljs-keyword">constructor</span>(props) {
        <span class="hljs-keyword">super</span>(props)
        <span class="hljs-keyword">this</span>.myRef = React.createRef()
      }
      render() {
            <span class="hljs-keyword">return</span> 
                  &lt;div&gt;
                &lt;input ref={ this.myRef } /&gt;
                &lt;button onClick = {()=&gt;this.handle()}&gt;&#x805A;&#x7126;&lt;/button&gt;
               &lt;/div&gt;
      }
      handle() {
          // &#x901A;&#x8FC7;current&#x5C5E;&#x6027;&#x8BBF;&#x95EE;&#x5230;&#x5F53;&#x524D;&#x5143;&#x7D20;
            this.myRef.current.focus()
      }
}
// &#x51FD;&#x6570;&#x7EC4;&#x4EF6;
function Foo() {
  const inputEl = useRef(null)
  const handle = () =&gt; {
        inputEl.current.focus()
  }
  return 
          &lt;div&gt;
                &lt;input type=&quot;text&quot; ref={ inputEl }/&gt;
            &lt;button onClick = {handle}&gt;&#x805A;&#x7126;&lt;/button&gt;
      &lt;/div&gt;
}
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-&#x8BF7;&#x5217;&#x4E3E;react&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#x3002;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-&#x8BF7;&#x5217;&#x4E3E;react&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#x3002;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x8BF7;&#x5217;&#x4E3E;react&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#x3002;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-&#x8BF7;&#x5217;&#x4E3E;react&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#x3002;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x8BF7;&#x5217;&#x4E3E;react&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#x3002;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; &#x8BF7;&#x5217;&#x4E3E;react&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#x3002;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
&#x7B2C;&#x4E00;&#x9636;&#x6BB5;&#xFF1A;&#x88C5;&#x8F7D;&#x9636;&#x6BB5;3
    constructor()
    render()
    componentDidMount()
&#x7B2C;&#x4E8C;&#x9636;&#x6BB5;&#xFF1A;&#x66F4;&#x65B0;&#x9636;&#x6BB5;2
    [shouldComponentUpdate()]
    render()
    componentDidUpdate()
&#x7B2C;&#x4E09;&#x9636;&#x6BB5;&#xFF1A;&#x5378;&#x8F7D;&#x9636;&#x6BB5;1
    componentWillUnmount()

constructor&#x751F;&#x547D;&#x5468;&#x671F;&#xFF1A;
    (1)&#x5F53;react&#x7EC4;&#x4EF6;&#x5B9E;&#x4F8B;&#x5316;&#x65F6;&#xFF0C;&#x662F;&#x7B2C;&#x4E00;&#x4E2A;&#x8FD0;&#x884C;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#xFF1B;
    (2)&#x5728;&#x8FD9;&#x4E2A;&#x751F;&#x547D;&#x5468;&#x671F;&#x4E2D;&#xFF0C;&#x4E0D;&#x80FD;&#x4F7F;&#x7528;this.setState()&#xFF1B;
    (3)&#x5728;&#x8FD9;&#x4E2A;&#x751F;&#x547D;&#x5468;&#x671F;&#x4E2D;&#xFF0C;&#x4E0D;&#x80FD;&#x4F7F;&#x7528;&#x526F;&#x4F5C;&#x7528;(&#x8C03;&#x63A5;&#x53E3;&#x3001;dom&#x64CD;&#x4F5C;&#x3001;&#x5B9A;&#x65F6;&#x5668;&#x3001;&#x957F;&#x8FDE;&#x63A5;&#x7B49;)&#xFF1B;
    (4)&#x4E0D;&#x80FD;&#x628A;props&#x548C;state&#x4EA4;&#x53C9;&#x8D4B;&#x503C;&#xFF1B;

componentDidMount&#x751F;&#x547D;&#x5468;&#x671F;&#xFF1A;
    (1)&#x76F8;&#x5F53;&#x4E8E;&#x662F;vue&#x4E2D;&#x7684;mounted&#xFF1B;
    (2)&#x5B83;&#x8868;&#x793A;DOM&#x7ED3;&#x6784;&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x6E32;&#x67D3;&#x5DF2;&#x5B8C;&#x6210;&#xFF1B;
    (3)&#x5728;&#x8FD9;&#x91CC;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x4EFB;&#x4F55;&#x7684;&#x526F;&#x4F5C;&#x7528;&#xFF1B;

shouldComponentUpdate(nextProps,nextState)&#x751F;&#x547D;&#x5468;&#x671F;&#xFF1A;
    (1)&#x76F8;&#x5F53;&#x4E8E;&#x4E00;&#x4E2A;&#x5F00;&#x5173;&#xFF0C;&#x5982;&#x679C;&#x8FD4;&#x56DE;true&#x5219;&#x66F4;&#x65B0;&#x673A;&#x5236;&#x6B63;&#x5E38;&#x6267;&#x884C;&#xFF0C;&#x5982;&#x679C;&#x4E3A;false&#x5219;&#x66F4;&#x65B0;&#x673A;&#x5236;&#x505C;&#x6B62;&#xFF1B;
    (2)&#x5728;vue&#x4E2D;&#x662F;&#x6CA1;&#x6709;&#x7684;&#xFF1B;
    (3)&#x5B58;&#x5728;&#x7684;&#x610F;&#x4E49;&#xFF1A;&#x53EF;&#x4EE5;&#x7528;&#x4E8E;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF0C;&#x4F46;&#x662F;&#x4E0D;&#x5E38;&#x7528;&#xFF0C;&#x6700;&#x65B0;&#x7684;&#x89E3;&#x51B3;&#x65B9;&#x6848;&#x662F;&#x4F7F;&#x7528;PureComponent&#xFF1B;
    (4)&#x7406;&#x8BBA;&#x4E0A;&#xFF0C;&#x8FD9;&#x4E2A;&#x751F;&#x547D;&#x5468;&#x671F;&#x7684;&#x4F5C;&#x7528;&#xFF0C;&#x7528;&#x4E8E;&#x7CBE;&#x7EC6;&#x5730;&#x63A7;&#x5236;&#x58F0;&#x660E;&#x5F0F;&#x53D8;&#x91CF;&#x7684;&#x66F4;&#x65B0;&#x95EE;&#x9898;&#xFF0C;&#x5982;&#x679C;&#x53D8;&#x5316;&#x7684;&#x58F0;&#x660E;&#x5F0F;&#x53D8;&#x91CF;&#x53C2;&#x4E0E;&#x4E86;&#x89C6;&#x56FE;&#x6E32;&#x67D3;&#x5219;&#x8FD4;&#x56DE;true&#xFF0C;&#x5982;&#x679C;&#x88AB;&#x53D8;&#x5316;&#x7684;&#x58F0;&#x660E;&#x5F0F;&#x53D8;&#x91CF;&#x6CA1;&#x6709;&#x76F4;&#x63A5;&#x6216;&#x95F4;&#x63A5;&#x53C2;&#x4E0E;&#x89C6;&#x56FE;&#x6E32;&#x67D3;&#xFF0C;&#x5219;&#x8FD4;&#x56DE;false&#xFF1B;

componentDidUpdate&#x751F;&#x547D;&#x5468;&#x671F;&#xFF1A;
    (1)&#x76F8;&#x5F53;&#x4E8E;vue&#x4E2D;&#x7684;updated()&#xFF1B;
    (2)&#x5B83;&#x8868;&#x793A;DOM&#x7ED3;&#x6784;&#x6E32;&#x67D3;&#x66F4;&#x65B0;&#x5DF2;&#x5B8C;&#x6210;&#xFF0C;&#x53EA;&#x53D1;&#x751F;&#x5728;&#x66F4;&#x65B0;&#x9636;&#x6BB5;&#xFF1B;
    (3)&#x5728;&#x8FD9;&#x91CC;&#xFF0C;&#x53EF;&#x4EE5;&#x6267;&#x884C;&#x5927;&#x591A;&#x6570;&#x7684;&#x526F;&#x4F5C;&#x7528;&#xFF0C;&#x4F46;&#x662F;&#x4E0D;&#x5EFA;&#x8BAE;&#xFF1B;
    (4)&#x5728;&#x8FD9;&#x91CC;&#xFF0C;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;this.setState()&#xFF0C;&#x4F46;&#x662F;&#x8981;&#x6709;&#x7EC8;&#x6B62;&#x6761;&#x4EF6;&#x5224;&#x65AD;&#x3002;

componentWillUnmount&#x751F;&#x547D;&#x5468;&#x671F;&#xFF1A;
    (1)&#x4E00;&#x822C;&#x5728;&#x8FD9;&#x91CC;&#x6E05;&#x9664;&#x5B9A;&#x65F6;&#x5668;&#x3001;&#x957F;&#x8FDE;&#x63A5;&#x7B49;&#x5176;&#x4ED6;&#x5360;&#x7528;&#x5185;&#x5B58;&#x7684;&#x6784;&#x9020;&#x5668;&#xFF1B;

render&#x751F;&#x547D;&#x5468;&#x671F;&#xFF1A;
    (1)render&#x662F;&#x7C7B;&#x7EC4;&#x4EF6;&#x4E2D;&#x552F;&#x4E00;&#x5FC5;&#x987B;&#x6709;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#xFF0C;&#x540C;&#x65F6;&#x5FC5;&#x987B;&#x6709;return&#xFF08;return &#x8FD4;&#x56DE;&#x7684;jsx&#x9ED8;&#x8BA4;&#x53EA;&#x80FD;&#x662F;&#x5355;&#x4E00;&#x6839;&#x8282;&#x70B9;&#xFF0C;&#x4F46;&#x662F;&#x5728;fragment&#x7684;&#x8BED;&#x6CD5;&#x652F;&#x6301;&#x4E0B;&#xFF0C;&#x53EF;&#x4EE5;&#x8FD4;&#x56DE;&#x591A;&#x4E2A;&#x5144;&#x5F1F;&#x8282;&#x70B9;&#xFF09;&#xFF1B;
    (2)Fragment&#x788E;&#x7247;&#x5199;&#x6CD5;: &lt;React.Fragment&gt;&lt;/React.Fragment&gt; &#x7B80;&#x5199;&#x6210;&lt;&gt;&lt;/&gt;&#xFF1B;
    (3)return&#x4E4B;&#x524D;&#xFF0C;&#x53EF;&#x4EE5;&#x505A;&#x4EFB;&#x610F;&#x7684;&#x4E1A;&#x52A1;&#x903B;&#x8F91;&#xFF0C;&#x4F46;&#x662F;&#x4E0D;&#x80FD;&#x4F7F;&#x7528;this.setState()&#xFF0C;&#x4F1A;&#x9020;&#x6210;&#x6B7B;&#x5FAA;&#x73AF;&#xFF1B;
    (4)render()&#x5728;&#x88C5;&#x8F7D;&#x9636;&#x6BB5;&#x548C;&#x66F4;&#x65B0;&#x9636;&#x6BB5;&#x90FD;&#x4F1A;&#x8FD0;&#x884C;&#xFF1B;
    (5)&#x5F53;render&#x65B9;&#x6CD5;&#x8FD4;&#x56DE;null&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x4E0D;&#x4F1A;&#x5F71;&#x54CD;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#x7684;&#x6B63;&#x5E38;&#x6267;&#x884C;&#x3002;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x7EC4;&#x4EF6;&#x7ED1;&#x5B9A;&#x548C;js&#x539F;&#x751F;&#x7ED1;&#x5B9A;&#x4E8B;&#x4EF6;&#x54EA;&#x4E2A;&#x5148;&#x6267;&#x884C;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-&#x7EC4;&#x4EF6;&#x7ED1;&#x5B9A;&#x548C;js&#x539F;&#x751F;&#x7ED1;&#x5B9A;&#x4E8B;&#x4EF6;&#x54EA;&#x4E2A;&#x5148;&#x6267;&#x884C;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x7EC4;&#x4EF6;&#x7ED1;&#x5B9A;&#x548C;js&#x539F;&#x751F;&#x7ED1;&#x5B9A;&#x4E8B;&#x4EF6;&#x54EA;&#x4E2A;&#x5148;&#x6267;&#x884C;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x7EC4;&#x4EF6;&#x7ED1;&#x5B9A;&#x548C;js&#x539F;&#x751F;&#x7ED1;&#x5B9A;&#x4E8B;&#x4EF6;&#x54EA;&#x4E2A;&#x5148;&#x6267;&#x884C;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x7EC4;&#x4EF6;&#x7ED1;&#x5B9A;&#x548C;js&#x539F;&#x751F;&#x7ED1;&#x5B9A;&#x4E8B;&#x4EF6;&#x54EA;&#x4E2A;&#x5148;&#x6267;&#x884C;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x7EC4;&#x4EF6;&#x7ED1;&#x5B9A;&#x548C;js&#x539F;&#x751F;&#x7ED1;&#x5B9A;&#x4E8B;&#x4EF6;&#x54EA;&#x4E2A;&#x5148;&#x6267;&#x884C;&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">// &#x5148;&#x6267;&#x884C;js&#x539F;&#x751F;&#x7ED1;&#x5B9A;&#x4E8B;&#x4EF6;&#xFF0C;&#x518D;&#x6267;&#x884C;&#x5408;&#x6210;&#x4E8B;&#x4EF6;&#xFF0C;&#x56E0;&#x4E3A;&#x5408;&#x6210;&#x4E8B;&#x4EF6;&#x662F;&#x53D1;&#x751F;&#x5728;&#x5192;&#x6CE1;&#x9636;&#x6BB5;</span>
</code></pre>
<h3 id="&#x2605;&#x2605;-fetch&#x7684;&#x5EF6;&#x65F6;&#x64CD;&#x4F5C;"><a name="&#x2605;&#x2605;-fetch&#x7684;&#x5EF6;&#x65F6;&#x64CD;&#x4F5C;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;-fetch&#x7684;&#x5EF6;&#x65F6;&#x64CD;&#x4F5C;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;-fetch&#x7684;&#x5EF6;&#x65F6;&#x64CD;&#x4F5C;" class="plugin-anchor" href="#&#x2605;&#x2605;-fetch&#x7684;&#x5EF6;&#x65F6;&#x64CD;&#x4F5C;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605; fetch&#x7684;&#x5EF6;&#x65F6;&#x64CD;&#x4F5C;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">// fetch&#x8BED;&#x6CD5;&#xFF1A;fetch(resource, config).then( function(response) { ... } )&#xFF1B;resource&#x4E3A;&#x8981;&#x83B7;&#x53D6;&#x7684;&#x8D44;&#x6E90;&#xFF0C;config&#x662F;&#x914D;&#x7F6E;&#x5BF9;&#x8C61;&#xFF0C;&#x5305;&#x542B;method&#x8BF7;&#x6C42;&#x65B9;&#x6CD5;&#xFF0C;headers&#x8BF7;&#x6C42;&#x5934;&#x4FE1;&#x606F;&#x7B49;</span>

<span class="hljs-comment">// &#x5B9A;&#x4E49;&#x4E00;&#x4E2A;&#x5EF6;&#x65F6;&#x51FD;&#x6570;&#xFF0C;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;promise</span>
<span class="hljs-keyword">const</span> delayPromise = (timeout=<span class="hljs-number">5000</span>) =&gt; {
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>((resolve, reject) =&gt; {
          setTimeout(()=&gt;{
              reject(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(<span class="hljs-string">&quot;&#x7F51;&#x7EDC;&#x9519;&#x8BEF;&quot;</span>))
        }, timeout)
    })
}

<span class="hljs-comment">// &#x5B9A;&#x4E49;&#x4E00;&#x4E2A;fetch&#x7F51;&#x7EDC;&#x8BF7;&#x6C42;&#xFF0C;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;promise</span>
<span class="hljs-keyword">const</span> fetchPromise = (resource, config) =&gt; {
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>((resolve, reject)=&gt;{
          fetch(resource, config).then(res=&gt;{
              resolve(res)
        })
    })
}

<span class="hljs-comment">// promise&#x7684;race&#x9759;&#x6001;&#x65B9;&#x6CD5;&#x63A5;&#x53D7;&#x591A;&#x4E2A;promise&#x5BF9;&#x8C61;&#x7EC4;&#x6210;&#x7684;&#x6570;&#x7EC4;&#xFF0C;&#x8BE5;&#x6570;&#x7EC4;&#x4E2D;&#x54EA;&#x4E2A;promise&#x5148;&#x6267;&#x884C;&#x5B8C;&#x6210;&#xFF0C;race&#x65B9;&#x6CD5;&#x5C31;&#x8FD4;&#x56DE;&#x8FD9;&#x4E2A;promise&#x7684;&#x6267;&#x884C;&#x7ED3;&#x679C;</span>
<span class="hljs-keyword">const</span> fetchRequest = (resource, config, timeout) =&gt; {
          <span class="hljs-built_in">Promise</span>.race([
        delayPromise(timeout), 
        fetchPromise(resource,config)
      ])
}
</code></pre>
<h3 id="&#x2605;&#x2605;-a-&#x7EC4;&#x4EF6;&#x5D4C;&#x5957;-b-&#x7EC4;&#x4EF6;&#xFF0C;&#x751F;&#x547D;&#x5468;&#x671F;&#x6267;&#x884C;&#x987A;&#x5E8F;"><a name="&#x2605;&#x2605;-a-&#x7EC4;&#x4EF6;&#x5D4C;&#x5957;-b-&#x7EC4;&#x4EF6;&#xFF0C;&#x751F;&#x547D;&#x5468;&#x671F;&#x6267;&#x884C;&#x987A;&#x5E8F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;-a-&#x7EC4;&#x4EF6;&#x5D4C;&#x5957;-b-&#x7EC4;&#x4EF6;&#xFF0C;&#x751F;&#x547D;&#x5468;&#x671F;&#x6267;&#x884C;&#x987A;&#x5E8F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;-a-&#x7EC4;&#x4EF6;&#x5D4C;&#x5957;-b-&#x7EC4;&#x4EF6;&#xFF0C;&#x751F;&#x547D;&#x5468;&#x671F;&#x6267;&#x884C;&#x987A;&#x5E8F;" class="plugin-anchor" href="#&#x2605;&#x2605;-a-&#x7EC4;&#x4EF6;&#x5D4C;&#x5957;-b-&#x7EC4;&#x4EF6;&#xFF0C;&#x751F;&#x547D;&#x5468;&#x671F;&#x6267;&#x884C;&#x987A;&#x5E8F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605; A &#x7EC4;&#x4EF6;&#x5D4C;&#x5957; B &#x7EC4;&#x4EF6;&#xFF0C;&#x751F;&#x547D;&#x5468;&#x671F;&#x6267;&#x884C;&#x987A;&#x5E8F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
    &#x7236;&#x7EC4;&#x4EF6;&#x521B;&#x5EFA;&#x9636;&#x6BB5;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x94A9;&#x5B50;&#x51FD;&#x6570; constructor
    &#x7236;&#x7EC4;&#x4EF6;&#x521B;&#x5EFA;&#x9636;&#x6BB5;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x94A9;&#x5B50;&#x51FD;&#x6570; render
    &#x5B50;&#x7EC4;&#x4EF6;&#x521B;&#x5EFA;&#x9636;&#x6BB5;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x94A9;&#x5B50;&#x51FD;&#x6570; constructor
    &#x5B50;&#x7EC4;&#x4EF6;&#x521B;&#x5EFA;&#x9636;&#x6BB5;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x94A9;&#x5B50;&#x51FD;&#x6570; render
    &#x5B50;&#x7EC4;&#x4EF6;&#x521B;&#x5EFA;&#x9636;&#x6BB5;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x94A9;&#x5B50;&#x51FD;&#x6570; componentDidMount
    &#x7236;&#x7EC4;&#x4EF6;&#x521B;&#x5EFA;&#x9636;&#x6BB5;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x94A9;&#x5B50;&#x51FD;&#x6570; componentDidMount
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-diff-&#x548C;-key-&#x4E4B;&#x95F4;&#x7684;&#x8054;&#x7CFB;"><a name="&#x2605;&#x2605;&#x2605;-diff-&#x548C;-key-&#x4E4B;&#x95F4;&#x7684;&#x8054;&#x7CFB;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-diff-&#x548C;-key-&#x4E4B;&#x95F4;&#x7684;&#x8054;&#x7CFB;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-diff-&#x548C;-key-&#x4E4B;&#x95F4;&#x7684;&#x8054;&#x7CFB;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-diff-&#x548C;-key-&#x4E4B;&#x95F4;&#x7684;&#x8054;&#x7CFB;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; diff &#x548C; Key &#x4E4B;&#x95F4;&#x7684;&#x8054;&#x7CFB;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
            diff&#x7B97;&#x6CD5;&#x5373;&#x5DEE;&#x5F02;&#x67E5;&#x627E;&#x7B97;&#x6CD5;&#xFF0C;&#x5BF9;&#x4E8E;DOM&#x7ED3;&#x6784;&#x5373;&#x4E3A;tree&#x7684;&#x5DEE;&#x5F02;&#x67E5;&#x627E;&#x7B97;&#x6CD5;&#xFF0C;&#x53EA;&#x6709;&#x5728;React&#x66F4;&#x65B0;&#x9636;&#x6BB5;&#x624D;&#x4F1A;&#x6709;Diff&#x7B97;&#x6CD5;&#x7684;&#x8FD0;&#x7528;&#xFF1B;react&#x7684;diff&#x8FD0;&#x7B97;&#x4E3A;&#x4E86;&#x964D;&#x4F4E;&#x65F6;&#x95F4;&#x590D;&#x6742;&#x5EA6;&#xFF0C;&#x662F;&#x6309;&#x5C42;&#x6BD4;&#x8F83;&#x65B0;&#x65E7;&#x4E24;&#x4E2A;&#x865A;&#x62DF;dom&#x6811;&#x7684;&#x3002;diff&#x8FD0;&#x7B97;&#x7684;&#x4E3B;&#x8981;&#x6D41;&#x7A0B;&#x89C1;&#x4E0B;&#xFF1A;

            1&#x3001;tree diff : &#x65B0;&#x65E7;&#x4E24;&#x68F5;dom&#x6811;&#xFF0C;&#x9010;&#x5C42;&#x5BF9;&#x6BD4;&#x7684;&#x8FC7;&#x7A0B;&#x5C31;&#x662F; tree diff, &#x5F53;&#x6574;&#x68F5;DOM&#x6811;&#x9010;&#x5C42;&#x5BF9;&#x6BD4;&#x5B8C;&#x6BD5;&#xFF0C;&#x5219;&#x6240;&#x6709;&#x9700;&#x8981;&#x88AB;&#x6309;&#x9700;&#x66F4;&#x65B0;&#x7684;&#x5143;&#x7D20;&#xFF0C;&#x5FC5;&#x7136;&#x80FD;&#x591F;&#x88AB;&#x627E;&#x5230;&#x3002;
        2&#x3001;component diff &#xFF1A; &#x5728;&#x8FDB;&#x884C;tree diff&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x6BCF;&#x4E00;&#x5C42;&#x4E2D;&#xFF0C;&#x90FD;&#x6709;&#x81EA;&#x5DF1;&#x7684;&#x7EC4;&#x4EF6;&#xFF0C;&#x7EC4;&#x4EF6;&#x7EA7;&#x522B;&#x7684;&#x5BF9;&#x6BD4;&#xFF0C;&#x53EB;&#x505A; component diff&#x3002;&#x5982;&#x679C;&#x5BF9;&#x6BD4;&#x524D;&#x540E;&#xFF0C;&#x7EC4;&#x4EF6;&#x7684;&#x7C7B;&#x578B;&#x76F8;&#x540C;&#xFF0C;&#x5219;&#x6682;&#x65F6;&#x8BA4;&#x4E3A;&#x6B64;&#x7EC4;&#x4EF6;&#x4E0D;&#x9700;&#x8981;&#x66F4;&#x65B0;&#xFF1B;&#x5982;&#x679C;&#x5BF9;&#x6BD4;&#x524D;&#x540E;&#xFF0C;&#x7EC4;&#x4EF6;&#x7684;&#x7C7B;&#x578B;&#x4E0D;&#x540C;&#xFF0C;&#x5219;&#x9700;&#x8981;&#x79FB;&#x9664;&#x65E7;&#x7EC4;&#x4EF6;&#xFF0C;&#x521B;&#x5EFA;&#x65B0;&#x7EC4;&#x4EF6;&#xFF0C;&#x5E76;&#x6E32;&#x67D3;&#x5230;&#x9875;&#x9762;&#x4E0A;&#x3002;
        React&#x53EA;&#x4F1A;&#x5339;&#x914D;&#x7C7B;&#x578B;&#x76F8;&#x540C;&#x7684;&#x7EC4;&#x4EF6;&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x8BF4;&#x5982;&#x679C;&lt;A&gt;&#x88AB;&lt;B&gt;&#x66FF;&#x6362;&#xFF0C;&#x90A3;&#x4E48;React&#x5C06;&#x76F4;&#x63A5;&#x5220;&#x9664;A&#x7EC4;&#x4EF6;&#x7136;&#x540E;&#x521B;&#x5EFA;&#x4E00;&#x4E2A;B&#x7EC4;&#x4EF6;&#xFF1B;&#x5982;&#x679C;&#x67D0;&#x7EC4;&#x4EF6;A&#x8F6C;&#x79FB;&#x5230;&#x540C;&#x5C42;B&#x7EC4;&#x4EF6;&#x4E0A;&#xFF0C;&#x90A3;&#x4E48;&#x8FD9;&#x4E2A;A&#x7EC4;&#x4EF6;&#x4F1A;&#x5148;&#x88AB;&#x9500;&#x6BC1;&#xFF0C;&#x7136;&#x540E;&#x5728;B&#x7EC4;&#x4EF6;&#x4E0B;&#x91CD;&#x65B0;&#x751F;&#x6210;&#xFF0C;&#x4EE5;A&#x4E3A;&#x6839;&#x8282;&#x70B9;&#x7684;&#x6811;&#x6574;&#x4E2A;&#x90FD;&#x88AB;&#x91CD;&#x65B0;&#x521B;&#x5EFA;&#xFF0C;&#x8FD9;&#x4F1A;&#x6BD4;&#x8F83;&#x8017;&#x8D39;&#x6027;&#x80FD;&#xFF0C;&#x4F46;&#x5B9E;&#x9645;&#x4E0A;&#x6211;&#x4EEC;&#x5F88;&#x5C11;&#x8DE8;&#x5C42;&#x79FB;&#x52A8;dom&#x8282;&#x70B9;&#xFF0C;&#x4E00;&#x822C;&#x90FD;&#x662F;&#x540C;&#x5C42;&#x6A2A;&#x5411;&#x79FB;&#x52A8;&#xFF1B;
        3&#x3001;element diff &#xFF1A;&#x5728;&#x8FDB;&#x884C;&#x7EC4;&#x4EF6;&#x5BF9;&#x6BD4;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x5982;&#x679C;&#x4E24;&#x4E2A;&#x7EC4;&#x4EF6;&#x7C7B;&#x578B;&#x76F8;&#x540C;&#xFF0C;&#x5219;&#x9700;&#x8981;&#x8FDB;&#x884C;&#x5143;&#x7D20;&#x7EA7;&#x522B;&#x7684;&#x5BF9;&#x6BD4;&#xFF0C;&#x8FD9;&#x53EB;&#x505A;element diff&#x3002;
        &#x5BF9;&#x4E8E;&#x5217;&#x8868;&#x6E32;&#x67D3;&#xFF0C;react&#x4F1A;&#x5728;&#x521B;&#x5EFA;&#x65F6;&#x8981;&#x6C42;&#x4E3A;&#x6BCF;&#x4E00;&#x9879;&#x8F93;&#x5165;&#x4E00;&#x4E2A;&#x72EC;&#x4E00;&#x65E0;&#x4E8C;&#x7684;key&#xFF0C;&#x8FD9;&#x6837;&#x5C31;&#x80FD;&#x8FDB;&#x884C;&#x9AD8;&#x6548;&#x7684;diff&#x8FD0;&#x7B97;&#x4E86;&#x3002;&#x6BD4;&#x5982;&#x6211;&#x4EEC;&#x8981;&#x5728;b&#x548C;c&#x8282;&#x70B9;&#x4E2D;&#x95F4;&#x63D2;&#x5165;&#x4E00;&#x4E2A;&#x8282;&#x70B9;f&#xFF0C;jquery&#x4F1A;&#x5C06;f&#x8FD9;&#x4E2A;&#x8282;&#x70B9;&#x540E;&#x9762;&#x7684;&#x6BCF;&#x4E00;&#x4E2A;&#x8282;&#x70B9;&#x90FD;&#x8FDB;&#x884C;&#x66F4;&#x65B0;&#xFF0C;&#x6BD4;&#x5982;c&#x66F4;&#x65B0;&#x6210;f&#xFF0C;d&#x66F4;&#x65B0;&#x6210;c&#xFF0C;e&#x66F4;&#x65B0;&#x6210;d&#xFF0C;&#x8FD9;&#x6837;&#x64CD;&#x4F5C;&#x7684;&#x8BDD;&#x5C31;&#x4F1A;&#x7279;&#x522B;&#x591A;&#xFF0C;&#x800C;&#x52A0;&#x4E86;key&#x7684;react&#x548B;&#x4E0D;&#x4F1A;&#x9891;&#x7E41;&#x64CD;&#x4F5C;dom&#xFF0C;&#x800C;&#x662F;&#x4F18;&#x5148;&#x91C7;&#x7528;&#x79FB;&#x52A8;&#x7684;&#x65B9;&#x5F0F;&#xFF0C;&#x627E;&#x5230;&#x6B63;&#x786E;&#x7684;&#x4F4D;&#x7F6E;&#x53BB;&#x63D2;&#x5165;&#x65B0;&#x8282;&#x70B9;&#xFF1B;&#x6240;&#x4EE5;&#x6211;&#x4EEC;&#x4E0D;&#x80FD;&#x7701;&#x7565;key&#x503C;&#xFF0C;&#x56E0;&#x4E3A;&#x5728;&#x5BF9;&#x6BD4;&#x4E24;&#x4E2A;&#x65B0;&#x65E7;&#x7684;&#x5B50;&#x5143;&#x7D20;&#x662F;&#xFF0C;&#x662F;&#x901A;&#x8FC7;key&#x503C;&#x6765;&#x7CBE;&#x786E;&#x5730;&#x5224;&#x65AD;&#x4E24;&#x4E2A;&#x8282;&#x70B9;&#x662F;&#x5426;&#x4E3A;&#x540C;&#x4E00;&#x4E2A;&#xFF0C;&#x5982;&#x679C;&#x6CA1;&#x6709;key&#x7684;&#x8BDD;&#x5219;&#x662F;&#x89C1;&#x5230;&#x8C01;&#x5C31;&#x66F4;&#x65B0;&#x8C01;&#xFF0C;&#x975E;&#x5E38;&#x8017;&#x8D39;&#x6027;&#x80FD;&#x3002;
            &#x5F53;&#x6211;&#x4EEC;&#x901A;&#x8FC7;this.setState()&#x6539;&#x53D8;&#x6570;&#x636E;&#x7684;&#x65F6;&#x5019;&#xFF0C;React&#x4F1A;&#x5C06;&#x5176;&#x6807;&#x8BB0;&#x4E3A;&#x810F;&#x8282;&#x70B9;&#xFF0C;&#x5728;&#x4E8B;&#x4EF6;&#x5FAA;&#x73AF;&#x7684;&#x6700;&#x540E;&#x624D;&#x4F1A;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x6240;&#x6709;&#x7684;&#x810F;&#x8282;&#x70B9;&#x4EE5;&#x53CA;&#x810F;&#x8282;&#x70B9;&#x7684;&#x5B50;&#x6811;&#xFF1B;&#x53E6;&#x5916;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;shouldComponentUpdate&#x8FD9;&#x4E2A;&#x751F;&#x547D;&#x5468;&#x671F;&#x6765;&#x9009;&#x62E9;&#x6027;&#x7684;&#x6E32;&#x67D3;&#x5B50;&#x6811;&#xFF0C;&#x53EF;&#x4EE5;&#x57FA;&#x4E8E;&#x7EC4;&#x4EF6;&#x4E4B;&#x524D;&#x7684;&#x72B6;&#x6001;&#x6216;&#x8005;&#x4E0B;&#x4E00;&#x4E2A;&#x72B6;&#x6001;&#x6765;&#x51B3;&#x5B9A;&#x5B83;&#x662F;&#x5426;&#x9700;&#x8981;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#xFF0C;&#x8FD9;&#x6837;&#x7684;&#x8BDD;&#x53EF;&#x4EE5;&#x7EC4;&#x7EC7;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x5927;&#x7684;&#x5B50;&#x6811;&#x3002;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x865A;&#x62DF;-dom-&#x548C;&#x539F;&#x751F;-dom"><a name="&#x2605;&#x2605;&#x2605;-&#x865A;&#x62DF;-dom-&#x548C;&#x539F;&#x751F;-dom" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x865A;&#x62DF;-dom-&#x548C;&#x539F;&#x751F;-dom"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x865A;&#x62DF;-dom-&#x548C;&#x539F;&#x751F;-dom" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x865A;&#x62DF;-dom-&#x548C;&#x539F;&#x751F;-dom"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x865A;&#x62DF; dom &#x548C;&#x539F;&#x751F; dom</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
        &#xFF08;1&#xFF09;&#x539F;&#x751F;dom&#x662F;&#x6D4F;&#x89C8;&#x5668;&#x901A;&#x8FC7;dom&#x6811;&#x6E32;&#x67D3;&#x7684;&#x590D;&#x6742;&#x5BF9;&#x8C61;&#xFF0C;&#x5C5E;&#x6027;&#x975E;&#x5E38;&#x591A;&#xFF1B;
        &#xFF08;2&#xFF09;&#x865A;&#x62DF;dom&#x662F;&#x5B58;&#x5728;&#x4E8E;&#x5185;&#x5B58;&#x4E2D;&#x7684;js&#x5BF9;&#x8C61;&#xFF0C;&#x5C5E;&#x6027;&#x8FDC;&#x5C11;&#x4E8E;&#x539F;&#x751F;&#x7684;dom&#x5BF9;&#x8C61;&#xFF0C;&#x5B83;&#x7528;&#x6765;&#x63CF;&#x8FF0;&#x771F;&#x5B9E;&#x7684;dom&#xFF0C;&#x5E76;&#x4E0D;&#x4F1A;&#x76F4;&#x63A5;&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;&#x663E;&#x793A;&#xFF1B;
        &#xFF08;3&#xFF09;&#x539F;&#x751F;dom&#x64CD;&#x4F5C;&#x3001;&#x9891;&#x7E41;&#x6392;&#x7248;&#x4E0E;&#x91CD;&#x7ED8;&#x7684;&#x6548;&#x7387;&#x662F;&#x76F8;&#x5F53;&#x4F4E;&#x7684;&#xFF0C;&#x865A;&#x62DF;dom&#x5219;&#x662F;&#x5229;&#x7528;&#x4E86;&#x8BA1;&#x7B97;&#x673A;&#x5185;&#x5B58;&#x9AD8;&#x6548;&#x7684;&#x8FD0;&#x7B97;&#x6027;&#x80FD;&#x51CF;&#x5C11;&#x4E86;&#x6027;&#x80FD;&#x7684;&#x635F;&#x8017;&#xFF1B;
        &#xFF08;4&#xFF09;&#x865A;&#x62DF;DOM&#x8FDB;&#x884C;&#x9891;&#x7E41;&#x4FEE;&#x6539;&#xFF0C;&#x7136;&#x540E;&#x4E00;&#x6B21;&#x6027;&#x6BD4;&#x8F83;&#x5E76;&#x4FEE;&#x6539;&#x771F;&#x5B9E;DOM&#x4E2D;&#x9700;&#x8981;&#x6539;&#x7684;&#x90E8;&#x5206;&#xFF0C;&#x6700;&#x540E;&#x5E76;&#x5728;&#x771F;&#x5B9E;DOM&#x4E2D;&#x5BF9;&#x4FEE;&#x6539;&#x90E8;&#x5206;&#x8FDB;&#x884C;&#x6392;&#x7248;&#x4E0E;&#x91CD;&#x7ED8;&#xFF0C;&#x51CF;&#x5C11;&#x8FC7;&#x591A;DOM&#x8282;&#x70B9;&#x6392;&#x7248;&#x4E0E;&#x91CD;&#x7ED8;&#x635F;&#x8017;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-&#x65B0;&#x51FA;&#x6765;&#x4E24;&#x4E2A;&#x94A9;&#x5B50;&#x51FD;&#x6570;&#xFF1F;&#x548C;&#x780D;&#x6389;&#x7684;will&#x7CFB;&#x5217;&#x6709;&#x5565;&#x533A;&#x522B;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-&#x65B0;&#x51FA;&#x6765;&#x4E24;&#x4E2A;&#x94A9;&#x5B50;&#x51FD;&#x6570;&#xFF1F;&#x548C;&#x780D;&#x6389;&#x7684;will&#x7CFB;&#x5217;&#x6709;&#x5565;&#x533A;&#x522B;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x65B0;&#x51FA;&#x6765;&#x4E24;&#x4E2A;&#x94A9;&#x5B50;&#x51FD;&#x6570;&#xFF1F;&#x548C;&#x780D;&#x6389;&#x7684;will&#x7CFB;&#x5217;&#x6709;&#x5565;&#x533A;&#x522B;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-&#x65B0;&#x51FA;&#x6765;&#x4E24;&#x4E2A;&#x94A9;&#x5B50;&#x51FD;&#x6570;&#xFF1F;&#x548C;&#x780D;&#x6389;&#x7684;will&#x7CFB;&#x5217;&#x6709;&#x5565;&#x533A;&#x522B;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x65B0;&#x51FA;&#x6765;&#x4E24;&#x4E2A;&#x94A9;&#x5B50;&#x51FD;&#x6570;&#xFF1F;&#x548C;&#x780D;&#x6389;&#x7684;will&#x7CFB;&#x5217;&#x6709;&#x5565;&#x533A;&#x522B;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; &#x65B0;&#x51FA;&#x6765;&#x4E24;&#x4E2A;&#x94A9;&#x5B50;&#x51FD;&#x6570;&#xFF1F;&#x548C;&#x780D;&#x6389;&#x7684;will&#x7CFB;&#x5217;&#x6709;&#x5565;&#x533A;&#x522B;&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">// react16 &#x4E2D;&#x5E9F;&#x5F03;&#x4E86;&#x4E09;&#x4E2A;&#x94A9;&#x5B50;</span>
componentWillMount                     <span class="hljs-comment">// &#x7EC4;&#x4EF6;&#x5C06;&#x8981;&#x6302;&#x8F7D;&#x7684;&#x94A9;&#x5B50;</span>
componentWillReceiveProps        <span class="hljs-comment">// &#x7EC4;&#x4EF6;&#x5C06;&#x8981;&#x63A5;&#x6536;&#x4E00;&#x4E2A;&#x65B0;&#x7684;&#x53C2;&#x6570;&#x65F6;&#x7684;&#x94A9;&#x5B50;</span>
componentWillUpdate                    <span class="hljs-comment">// &#x7EC4;&#x4EF6;&#x5C06;&#x8981;&#x66F4;&#x65B0;&#x7684;&#x94A9;&#x5B50;</span>

<span class="hljs-comment">// &#x65B0;&#x589E;&#x4E86;&#x65B9;&#x6CD5;</span>
getDerivedStateFromProps        <span class="hljs-comment">// &#x9759;&#x6001;&#x65B9;&#x6CD5;</span>
getSnapshotBeforeUpdate

<span class="hljs-comment">/*
        &#x5728;16.8&#x7248;&#x672C;&#x4EE5;&#x540E;&#xFF0C;react&#x5C06;diff&#x8FD0;&#x7B97;&#x6539;&#x8FDB;&#x4E3A;Fiber&#xFF0C;&#x8FD9;&#x6837;&#x7684;&#x8BDD;&#x5F53;&#x6211;&#x4EEC;&#x8C03;&#x7528;setState&#x65B9;&#x6CD5;&#x8FDB;&#x884C;&#x66F4;&#x65B0;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x5728;reconciler &#x5C42;&#x4E2D;js&#x8FD0;&#x7B97;&#x4F1A;&#x6309;&#x7167;&#x8282;&#x70B9;&#x4E3A;&#x5355;&#x4F4D;&#x62C6;&#x5206;&#x6210;&#x4E00;&#x4E2A;&#x4E2A;&#x5C0F;&#x7684;&#x5DE5;&#x4F5C;&#x5355;&#x5143;&#xFF0C;&#x5728;render&#x524D;&#x53EF;&#x80FD;&#x4F1A;&#x4E2D;&#x65AD;&#x6216;&#x6062;&#x590D;&#xFF0C;&#x5C31;&#x6709;&#x53EF;&#x80FD;&#x5BFC;&#x81F4;&#x5728;render&#x524D;&#x8FD9;&#x4E9B;&#x751F;&#x547D;&#x5468;&#x671F;&#x5728;&#x8FDB;&#x884C;&#x4E00;&#x6B21;&#x66F4;&#x65B0;&#x65F6;&#x5B58;&#x5728;&#x591A;&#x6B21;&#x6267;&#x884C;&#x7684;&#x60C5;&#x51B5;&#xFF0C;&#x6B64;&#x65F6;&#x5982;&#x679C;&#x6211;&#x4EEC;&#x5728;&#x91CC;&#x9762;&#x4F7F;&#x7528;ref&#x64CD;&#x4F5C;dom&#x7684;&#x8BDD;&#xFF0C;&#x5C31;&#x4F1A;&#x9020;&#x6210;&#x9875;&#x9762;&#x9891;&#x7E41;&#x91CD;&#x7ED8;&#xFF0C;&#x5F71;&#x54CD;&#x6027;&#x80FD;&#x3002;
        &#x6240;&#x4EE5;&#x5E9F;&#x5F03;&#x4E86;&#x8FD9;&#x51E0;&#x4E2A;will&#x7CFB;&#x5217;&#x7684;&#x52FE;&#x5B50;&#xFF0C;&#x589E;&#x52A0;&#x4E86; getDerivedStateFromProps&#x8FD9;&#x4E2A;&#x9759;&#x6001;&#x65B9;&#x6CD5;&#xFF0C;&#x8FD9;&#x6837;&#x7684;&#x8BDD;&#x6211;&#x4EEC;&#x5C31;&#x4E0D;&#x80FD;&#x5728;&#x5176;&#x4E2D;&#x4F7F;&#x7528;this.refs&#x4EE5;&#x53CA;this&#x4E0A;&#x7684;&#x65B9;&#x6CD5;&#x4E86;&#xFF1B;getSnapshotBeforeUpdate &#x8FD9;&#x4E2A;&#x65B9;&#x6CD5;&#x5DF2;&#x7ECF;&#x5230;&#x4E86;commit&#x9636;&#x6BB5;&#xFF0C;&#x53EA;&#x4F1A;&#x6267;&#x884C;&#x4E00;&#x6B21;&#xFF0C;&#x7ED9;&#x60F3;&#x8BFB;&#x53D6; dom &#x7684;&#x7528;&#x6237;&#x4E00;&#x4E9B;&#x7A7A;&#x95F4;&#x3002;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x5982;&#x4F55;&#x6253;&#x5305;&#x4E0A;&#x4F20;&#x56FE;&#x7247;&#x6587;&#x4EF6;"><a name="&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x5982;&#x4F55;&#x6253;&#x5305;&#x4E0A;&#x4F20;&#x56FE;&#x7247;&#x6587;&#x4EF6;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x5982;&#x4F55;&#x6253;&#x5305;&#x4E0A;&#x4F20;&#x56FE;&#x7247;&#x6587;&#x4EF6;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x5982;&#x4F55;&#x6253;&#x5305;&#x4E0A;&#x4F20;&#x56FE;&#x7247;&#x6587;&#x4EF6;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x5982;&#x4F55;&#x6253;&#x5305;&#x4E0A;&#x4F20;&#x56FE;&#x7247;&#x6587;&#x4EF6;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; react&#x4E2D;&#x5982;&#x4F55;&#x6253;&#x5305;&#x4E0A;&#x4F20;&#x56FE;&#x7247;&#x6587;&#x4EF6;</p></h3>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x5BF9;&#x5355;&#x5411;&#x6570;&#x636E;&#x6D41;&#x548C;&#x53CC;&#x5411;&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#x7684;&#x7406;&#x89E3;&#xFF0C;&#x597D;&#x5904;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-&#x5BF9;&#x5355;&#x5411;&#x6570;&#x636E;&#x6D41;&#x548C;&#x53CC;&#x5411;&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#x7684;&#x7406;&#x89E3;&#xFF0C;&#x597D;&#x5904;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x5BF9;&#x5355;&#x5411;&#x6570;&#x636E;&#x6D41;&#x548C;&#x53CC;&#x5411;&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#x7684;&#x7406;&#x89E3;&#xFF0C;&#x597D;&#x5904;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x5BF9;&#x5355;&#x5411;&#x6570;&#x636E;&#x6D41;&#x548C;&#x53CC;&#x5411;&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#x7684;&#x7406;&#x89E3;&#xFF0C;&#x597D;&#x5904;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x5BF9;&#x5355;&#x5411;&#x6570;&#x636E;&#x6D41;&#x548C;&#x53CC;&#x5411;&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#x7684;&#x7406;&#x89E3;&#xFF0C;&#x597D;&#x5904;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x5BF9;&#x5355;&#x5411;&#x6570;&#x636E;&#x6D41;&#x548C;&#x53CC;&#x5411;&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#x7684;&#x7406;&#x89E3;&#xFF0C;&#x597D;&#x5904;&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
        react&#x7684;&#x5355;&#x5411;&#x6570;&#x636E;&#x6D41;&#x662F;&#x6307;&#x53EA;&#x5141;&#x8BB8;&#x7236;&#x7EC4;&#x4EF6;&#x5411;&#x5B50;&#x7EC4;&#x4EF6;&#x4F20;&#x9012;&#x6570;&#x636E;&#xFF0C;&#x5B50;&#x7EC4;&#x4EF6;&#x7EDD;&#x5BF9;&#x4E0D;&#x80FD;&#x4FEE;&#x6539;&#x7236;&#x7EC4;&#x4EF6;&#x4F20;&#x7684;&#x6570;&#x636E;&#xFF0C;&#x5982;&#x679C;&#x60F3;&#x8981;&#x4FEE;&#x6539;&#x6570;&#x636E;&#xFF0C;&#x5219;&#x8981;&#x5728;&#x5B50;&#x7EC4;&#x4EF6;&#x4E2D;&#x6267;&#x884C;&#x7236;&#x7EC4;&#x4EF6;&#x4F20;&#x9012;&#x8FC7;&#x6765;&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#xFF0C;&#x63D0;&#x9192;&#x7236;&#x7EC4;&#x4EF6;&#x5BF9;&#x6570;&#x636E;&#x8FDB;&#x884C;&#x4FEE;&#x6539;&#x3002;&#x6570;&#x636E;&#x5355;&#x5411;&#x6D41;&#x8BA9;&#x6240;&#x6709;&#x7684;&#x72B6;&#x6001;&#x6539;&#x53D8;&#x53EF;&#x4EE5;&#x8FFD;&#x6EAF;&#xFF0C;&#x6709;&#x5229;&#x4E8E;&#x5E94;&#x7528;&#x7684;&#x53EF;&#x7EF4;&#x62A4;&#x6027;&#xFF1B;
        angular&#x4E2D;&#x5B9E;&#x73B0;&#x4E86;&#x53CC;&#x5411;&#x6570;&#x636E;&#x7ED1;&#x5B9A;&#xFF0C;&#x4EE3;&#x7801;&#x7F16;&#x5199;&#x65B9;&#x4FBF;&#xFF0C;&#x4F46;&#x662F;&#x4E0D;&#x5229;&#x4E8E;&#x7EF4;&#x62A4;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;-react-&#x7EC4;&#x4EF6;&#x4E2D;-props-&#x548C;-state-&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;"><a name="&#x2605;&#x2605;-react-&#x7EC4;&#x4EF6;&#x4E2D;-props-&#x548C;-state-&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;-react-&#x7EC4;&#x4EF6;&#x4E2D;-props-&#x548C;-state-&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;-react-&#x7EC4;&#x4EF6;&#x4E2D;-props-&#x548C;-state-&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;-react-&#x7EC4;&#x4EF6;&#x4E2D;-props-&#x548C;-state-&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605; React &#x7EC4;&#x4EF6;&#x4E2D; props &#x548C; state &#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
        1&#x3001;props&#x662F;&#x4ECE;&#x5916;&#x90E8;&#x4F20;&#x5165;&#x7EC4;&#x4EF6;&#x7684;&#x53C2;&#x6570;&#xFF0C;&#x4E00;&#x822C;&#x7528;&#x4E8E;&#x7236;&#x7EC4;&#x4EF6;&#x5411;&#x5B50;&#x7EC4;&#x4EF6;&#x901A;&#x4FE1;&#xFF0C;&#x5728;&#x7EC4;&#x4EF6;&#x4E4B;&#x95F4;&#x901A;&#x4FE1;&#x4F7F;&#x7528;&#xFF1B;state&#x4E00;&#x822C;&#x7528;&#x4E8E;&#x7EC4;&#x4EF6;&#x5185;&#x90E8;&#x7684;&#x72B6;&#x6001;&#x7EF4;&#x62A4;&#xFF0C;&#x66F4;&#x65B0;&#x7EC4;&#x5EFA;&#x5185;&#x90E8;&#x7684;&#x6570;&#x636E;&#xFF0C;&#x72B6;&#x6001;&#xFF0C;&#x66F4;&#x65B0;&#x5B50;&#x7EC4;&#x4EF6;&#x7684;props&#x7B49;
        2&#x3001;props&#x4E0D;&#x53EF;&#x4EE5;&#x5728;&#x7EC4;&#x4EF6;&#x5185;&#x90E8;&#x4FEE;&#x6539;&#xFF0C;&#x53EA;&#x80FD;&#x901A;&#x8FC7;&#x7236;&#x7EC4;&#x4EF6;&#x8FDB;&#x884C;&#x4FEE;&#x6539;&#xFF1B;state&#x5728;&#x7EC4;&#x4EF6;&#x5185;&#x90E8;&#x901A;&#x8FC7;setState&#x4FEE;&#x6539;&#xFF1B;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;-react&#x4E2D;&#x7EC4;&#x4EF6;&#x5206;&#x4E3A;&#x90A3;&#x4FE9;&#x79CD;&#xFF1F;"><a name="&#x2605;&#x2605;-react&#x4E2D;&#x7EC4;&#x4EF6;&#x5206;&#x4E3A;&#x90A3;&#x4FE9;&#x79CD;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;-react&#x4E2D;&#x7EC4;&#x4EF6;&#x5206;&#x4E3A;&#x90A3;&#x4FE9;&#x79CD;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;-react&#x4E2D;&#x7EC4;&#x4EF6;&#x5206;&#x4E3A;&#x90A3;&#x4FE9;&#x79CD;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;-react&#x4E2D;&#x7EC4;&#x4EF6;&#x5206;&#x4E3A;&#x90A3;&#x4FE9;&#x79CD;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605; react&#x4E2D;&#x7EC4;&#x4EF6;&#x5206;&#x4E3A;&#x90A3;&#x4FE9;&#x79CD;&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">// &#x7C7B;&#x7EC4;&#x4EF6;&#x548C;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;</span>
</code></pre>
<h3 id="&#x2605;&#x2605;-react&#x4E2D;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x548C;&#x666E;&#x901A;&#x7EC4;&#x4EF6;&#x7684;&#x533A;&#x522B;&#xFF1F;"><a name="&#x2605;&#x2605;-react&#x4E2D;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x548C;&#x666E;&#x901A;&#x7EC4;&#x4EF6;&#x7684;&#x533A;&#x522B;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;-react&#x4E2D;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x548C;&#x666E;&#x901A;&#x7EC4;&#x4EF6;&#x7684;&#x533A;&#x522B;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;-react&#x4E2D;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x548C;&#x666E;&#x901A;&#x7EC4;&#x4EF6;&#x7684;&#x533A;&#x522B;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;-react&#x4E2D;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x548C;&#x666E;&#x901A;&#x7EC4;&#x4EF6;&#x7684;&#x533A;&#x522B;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605; react&#x4E2D;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x548C;&#x666E;&#x901A;&#x7EC4;&#x4EF6;&#x7684;&#x533A;&#x522B;&#xFF1F;</p></h3>
<p>&#x89C1;&#x4E0A;</p>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-react&#x4E2D;-setstate-&#x4E4B;&#x540E;&#x505A;&#x4E86;&#x4EC0;&#x4E48;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-react&#x4E2D;-setstate-&#x4E4B;&#x540E;&#x505A;&#x4E86;&#x4EC0;&#x4E48;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-react&#x4E2D;-setstate-&#x4E4B;&#x540E;&#x505A;&#x4E86;&#x4EC0;&#x4E48;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-react&#x4E2D;-setstate-&#x4E4B;&#x540E;&#x505A;&#x4E86;&#x4EC0;&#x4E48;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-react&#x4E2D;-setstate-&#x4E4B;&#x540E;&#x505A;&#x4E86;&#x4EC0;&#x4E48;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; react&#x4E2D; setState &#x4E4B;&#x540E;&#x505A;&#x4E86;&#x4EC0;&#x4E48;&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
        &#x5982;&#x679C;&#x662F;&#x5728;&#x96B6;&#x5C5E;&#x4E8E;&#x539F;&#x751F;js&#x6267;&#x884C;&#x7684;&#x7A7A;&#x95F4;&#xFF0C;&#x6BD4;&#x5982;&#x8BF4;setTimeout&#x91CC;&#x9762;&#xFF0C;setState&#x662F;&#x540C;&#x6B65;&#x7684;&#xFF0C;&#x90A3;&#x4E48;&#x6BCF;&#x6B21;&#x6267;&#x884C;setState&#x5C06;&#x7ACB;&#x5373;&#x66F4;&#x65B0;this.state&#xFF0C;&#x7136;&#x540E;&#x89E6;&#x53D1;render&#x65B9;&#x6CD5;&#xFF0C;&#x6E32;&#x67D3;&#x6570;&#x636E;&#xFF1B;
        &#x5982;&#x679C;&#x662F;&#x5728;&#x88AB;react&#x5904;&#x7406;&#x8FC7;&#x7684;&#x7A7A;&#x95F4;&#x6267;&#x884C;&#xFF0C;&#x6BD4;&#x5982;&#x8BF4;&#x5408;&#x6210;&#x4E8B;&#x4EF6;&#x91CC;&#xFF0C;&#x6B64;&#x65F6;setState&#x662F;&#x5F02;&#x6B65;&#x6267;&#x884C;&#x7684;&#xFF0C;&#x5E76;&#x4E0D;&#x4F1A;&#x7ACB;&#x5373;&#x66F4;&#x65B0;this.state&#x7684;&#x503C;&#xFF0C;&#x5F53;&#x6267;&#x884C;setState&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x4F1A;&#x5C06;&#x9700;&#x8981;&#x66F4;&#x65B0;&#x7684;state&#x653E;&#x5165;&#x72B6;&#x6001;&#x961F;&#x5217;&#xFF0C;&#x5728;&#x8FD9;&#x4E2A;&#x7A7A;&#x95F4;&#x6700;&#x540E;&#x518D;&#x5408;&#x5E76;&#x4FEE;&#x6539;this.state&#xFF0C;&#x89E6;&#x53D1;render&#xFF1B;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-redux&#x672C;&#x6765;&#x662F;&#x540C;&#x6B65;&#x7684;&#xFF0C;&#x4E3A;&#x4EC0;&#x4E48;&#x5B83;&#x80FD;&#x6267;&#x884C;&#x5F02;&#x6B65;&#x4EE3;&#x7801;&#xFF1F;&#x4E2D;&#x95F4;&#x4EF6;&#x7684;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-redux&#x672C;&#x6765;&#x662F;&#x540C;&#x6B65;&#x7684;&#xFF0C;&#x4E3A;&#x4EC0;&#x4E48;&#x5B83;&#x80FD;&#x6267;&#x884C;&#x5F02;&#x6B65;&#x4EE3;&#x7801;&#xFF1F;&#x4E2D;&#x95F4;&#x4EF6;&#x7684;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-redux&#x672C;&#x6765;&#x662F;&#x540C;&#x6B65;&#x7684;&#xFF0C;&#x4E3A;&#x4EC0;&#x4E48;&#x5B83;&#x80FD;&#x6267;&#x884C;&#x5F02;&#x6B65;&#x4EE3;&#x7801;&#xFF1F;&#x4E2D;&#x95F4;&#x4EF6;&#x7684;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-redux&#x672C;&#x6765;&#x662F;&#x540C;&#x6B65;&#x7684;&#xFF0C;&#x4E3A;&#x4EC0;&#x4E48;&#x5B83;&#x80FD;&#x6267;&#x884C;&#x5F02;&#x6B65;&#x4EE3;&#x7801;&#xFF1F;&#x4E2D;&#x95F4;&#x4EF6;&#x7684;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-redux&#x672C;&#x6765;&#x662F;&#x540C;&#x6B65;&#x7684;&#xFF0C;&#x4E3A;&#x4EC0;&#x4E48;&#x5B83;&#x80FD;&#x6267;&#x884C;&#x5F02;&#x6B65;&#x4EE3;&#x7801;&#xFF1F;&#x4E2D;&#x95F4;&#x4EF6;&#x7684;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; redux&#x672C;&#x6765;&#x662F;&#x540C;&#x6B65;&#x7684;&#xFF0C;&#x4E3A;&#x4EC0;&#x4E48;&#x5B83;&#x80FD;&#x6267;&#x884C;&#x5F02;&#x6B65;&#x4EE3;&#x7801;&#xFF1F;&#x4E2D;&#x95F4;&#x4EF6;&#x7684;&#x5B9E;&#x73B0;&#x539F;&#x7406;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
        &#x5F53;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x4FEE;&#x6539;store&#x4E2D;&#x503C;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x6211;&#x4EEC;&#x662F;&#x901A;&#x8FC7; dispatch(action)&#x5C06;&#x8981;&#x4FEE;&#x6539;&#x7684;&#x503C;&#x4F20;&#x5230;reducer&#x4E2D;&#x7684;&#xFF0C;&#x8FD9;&#x4E2A;&#x8FC7;&#x7A0B;&#x662F;&#x540C;&#x6B65;&#x7684;&#xFF0C;&#x5982;&#x679C;&#x6211;&#x4EEC;&#x8981;&#x8FDB;&#x884C;&#x5F02;&#x6B65;&#x64CD;&#x4F5C;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x5C31;&#x9700;&#x8981;&#x7528;&#x5230;&#x4E2D;&#x95F4;&#x4EF6;&#xFF1B;&#x4E2D;&#x95F4;&#x4EF6;&#x5176;&#x5B9E;&#x662F;&#x63D0;&#x4F9B;&#x4E86;&#x4E00;&#x4E2A;&#x5206;&#x7C7B;&#x5904;&#x7406;action&#x7684;&#x673A;&#x4F1A;&#xFF0C;&#x5728; middleware &#x4E2D;&#xFF0C;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x68C0;&#x9605;&#x6BCF;&#x4E00;&#x4E2A;&#x6D41;&#x8FC7;&#x7684;action&#xFF0C;&#x5E76;&#x6311;&#x9009;&#x51FA;&#x7279;&#x5B9A;&#x7C7B;&#x578B;&#x7684; action&#x8FDB;&#x884C;&#x76F8;&#x5E94;&#x64CD;&#x4F5C;&#xFF0C;&#x4EE5;&#x6B64;&#x6765;&#x6539;&#x53D8; action&#xFF1B;

         applyMiddleware &#x662F;&#x4E2A;&#x4E09;&#x7EA7;&#x67EF;&#x91CC;&#x5316;&#x7684;&#x51FD;&#x6570;&#x3002;&#x5B83;&#x5C06;&#x9646;&#x7EED;&#x7684;&#x83B7;&#x5F97;&#x4E09;&#x4E2A;&#x53C2;&#x6570;&#xFF1A;&#x7B2C;&#x4E00;&#x4E2A;&#x662F; middlewares &#x6570;&#x7EC4;&#xFF0C;&#x7B2C;&#x4E8C;&#x4E2A;&#x662F; Redux &#x539F;&#x751F;&#x7684; createStore&#xFF0C;&#x6700;&#x540E;&#x4E00;&#x4E2A;&#x662F; reducer&#xFF1B;&#x7136;&#x540E;applyMiddleware&#x4F1A;&#x5C06;&#x4E0D;&#x540C;&#x7684;&#x4E2D;&#x95F4;&#x4EF6;&#x4E00;&#x5C42;&#x4E00;&#x5C42;&#x5305;&#x88F9;&#x5230;&#x539F;&#x751F;&#x7684; dispatch &#x4E4B;&#x4E0A;&#xFF1B;
         redux-thunk &#x4E2D;&#x95F4;&#x4EF6;&#x7684;&#x4F5C;&#x7528;&#x5C31;&#x662F;&#x8BA9;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x5F02;&#x6B65;&#x6267;&#x884C;redux&#xFF0C;&#x9996;&#x5148;&#x68C0;&#x67E5;&#x53C2;&#x6570; action &#x7684;&#x7C7B;&#x578B;&#xFF0C;&#x5982;&#x679C;&#x662F;&#x51FD;&#x6570;&#x7684;&#x8BDD;&#xFF0C;&#x5C31;&#x6267;&#x884C;&#x8FD9;&#x4E2A; action&#x8FD9;&#x4E2A;&#x51FD;&#x6570;&#xFF0C;&#x5E76;&#x628A; dispatch, getState, extraArgument &#x4F5C;&#x4E3A;&#x53C2;&#x6570;&#x4F20;&#x9012;&#x8FDB;&#x53BB;&#xFF0C;&#x5426;&#x5219;&#x5C31;&#x8C03;&#x7528;next&#x8BA9;&#x4E0B;&#x4E00;&#x4E2A;&#x4E2D;&#x95F4;&#x4EF6;&#x7EE7;&#x7EED;&#x5904;&#x7406;action&#x3002;
*/</span>

<span class="hljs-comment">// redux-thunk&#x90E8;&#x5206;&#x6E90;&#x7801;</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">createThunkMiddleware</span>(<span class="hljs-params">extraArgument</span>) </span>{
  <span class="hljs-keyword">return</span> ({ dispatch, getState }) =&gt; next =&gt; action =&gt; {
    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> action === <span class="hljs-string">&apos;function&apos;</span>) {
      <span class="hljs-keyword">return</span> action(dispatch, getState, extraArgument)
    }
    <span class="hljs-keyword">return</span> next(action)
  }
}
<span class="hljs-keyword">const</span> thunk = createThunkMiddleware()
thunk.withExtraArgument = createThunkMiddleware
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> thunk
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-&#x5217;&#x4E3E;&#x91CD;&#x65B0;&#x6E32;&#x67D3;-render-&#x7684;&#x60C5;&#x51B5;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-&#x5217;&#x4E3E;&#x91CD;&#x65B0;&#x6E32;&#x67D3;-render-&#x7684;&#x60C5;&#x51B5;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x5217;&#x4E3E;&#x91CD;&#x65B0;&#x6E32;&#x67D3;-render-&#x7684;&#x60C5;&#x51B5;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-&#x5217;&#x4E3E;&#x91CD;&#x65B0;&#x6E32;&#x67D3;-render-&#x7684;&#x60C5;&#x51B5;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x5217;&#x4E3E;&#x91CD;&#x65B0;&#x6E32;&#x67D3;-render-&#x7684;&#x60C5;&#x51B5;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; &#x5217;&#x4E3E;&#x91CD;&#x65B0;&#x6E32;&#x67D3; render &#x7684;&#x60C5;&#x51B5;</p></h3>
<pre><code class="lang-js"><span class="hljs-keyword">this</span>.setState() 
<span class="hljs-keyword">this</span>.forceUpdate()
<span class="hljs-comment">// &#x63A5;&#x53D7;&#x5230;&#x65B0;&#x7684;props</span>
<span class="hljs-comment">// &#x901A;&#x8FC7;&#x72B6;&#x6001;&#x7BA1;&#x7406;&#xFF0C;mobx&#x3001;redux&#x7B49;</span>
<span class="hljs-comment">// &#x6539;&#x53D8;&#x4E0A;&#x4E0B;&#x6587;</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-react-&#x6309;&#x9700;&#x52A0;&#x8F7D;"><a name="&#x2605;&#x2605;&#x2605;-react-&#x6309;&#x9700;&#x52A0;&#x8F7D;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-react-&#x6309;&#x9700;&#x52A0;&#x8F7D;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-react-&#x6309;&#x9700;&#x52A0;&#x8F7D;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-react-&#x6309;&#x9700;&#x52A0;&#x8F7D;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; React &#x6309;&#x9700;&#x52A0;&#x8F7D;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">// 1&#x3001;&#x4F7F;&#x7528;React.lazy&#xFF0C; &#x4F46;&#x662F;React.lazy&#x6280;&#x672F;&#x8FD8;&#x4E0D;&#x652F;&#x6301;&#x670D;&#x52A1;&#x7AEF;&#x6E32;&#x67D3;</span>
<span class="hljs-keyword">const</span> OtherComponent = React.lazy(() =&gt; <span class="hljs-keyword">import</span>(<span class="hljs-string">&apos;./OtherComponent&apos;</span>))
<span class="hljs-comment">// 2&#x3001;&#x4F7F;&#x7528;Loadable Components&#x8FD9;&#x4E2A;&#x5E93;</span>
<span class="hljs-keyword">import</span> loadable <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;@loadable/component&apos;</span>
<span class="hljs-keyword">const</span> OtherComponent = loadable(() =&gt; <span class="hljs-keyword">import</span>(<span class="hljs-string">&apos;./OtherComponent&apos;</span>))
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-react-&#x5B9E;&#x73B0;&#x76EE;&#x5F55;&#x6811;&#xFF08;&#x7EC4;&#x4EF6;&#x81EA;&#x8EAB;&#x8C03;&#x7528;&#x81EA;&#x8EAB;&#xFF09;"><a name="&#x2605;&#x2605;&#x2605;-react-&#x5B9E;&#x73B0;&#x76EE;&#x5F55;&#x6811;&#xFF08;&#x7EC4;&#x4EF6;&#x81EA;&#x8EAB;&#x8C03;&#x7528;&#x81EA;&#x8EAB;&#xFF09;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-react-&#x5B9E;&#x73B0;&#x76EE;&#x5F55;&#x6811;&#xFF08;&#x7EC4;&#x4EF6;&#x81EA;&#x8EAB;&#x8C03;&#x7528;&#x81EA;&#x8EAB;&#xFF09;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-react-&#x5B9E;&#x73B0;&#x76EE;&#x5F55;&#x6811;&#xFF08;&#x7EC4;&#x4EF6;&#x81EA;&#x8EAB;&#x8C03;&#x7528;&#x81EA;&#x8EAB;&#xFF09;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-react-&#x5B9E;&#x73B0;&#x76EE;&#x5F55;&#x6811;&#xFF08;&#x7EC4;&#x4EF6;&#x81EA;&#x8EAB;&#x8C03;&#x7528;&#x81EA;&#x8EAB;&#xFF09;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; React &#x5B9E;&#x73B0;&#x76EE;&#x5F55;&#x6811;&#xFF08;&#x7EC4;&#x4EF6;&#x81EA;&#x8EAB;&#x8C03;&#x7528;&#x81EA;&#x8EAB;&#xFF09;</p></h3>
<h3 id="&#x2605;&#x2605;&#x2605;-react&#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x6309;&#x88C5;&#x8F7D;&#xFF0C;&#x66F4;&#x65B0;&#xFF0C;&#x9500;&#x6BC1;&#x4E09;&#x4E2A;&#x9636;&#x6BB5;&#x5206;&#x522B;&#x90FD;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-react&#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x6309;&#x88C5;&#x8F7D;&#xFF0C;&#x66F4;&#x65B0;&#xFF0C;&#x9500;&#x6BC1;&#x4E09;&#x4E2A;&#x9636;&#x6BB5;&#x5206;&#x522B;&#x90FD;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x6309;&#x88C5;&#x8F7D;&#xFF0C;&#x66F4;&#x65B0;&#xFF0C;&#x9500;&#x6BC1;&#x4E09;&#x4E2A;&#x9636;&#x6BB5;&#x5206;&#x522B;&#x90FD;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-react&#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x6309;&#x88C5;&#x8F7D;&#xFF0C;&#x66F4;&#x65B0;&#xFF0C;&#x9500;&#x6BC1;&#x4E09;&#x4E2A;&#x9636;&#x6BB5;&#x5206;&#x522B;&#x90FD;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x6309;&#x88C5;&#x8F7D;&#xFF0C;&#x66F4;&#x65B0;&#xFF0C;&#x9500;&#x6BC1;&#x4E09;&#x4E2A;&#x9636;&#x6BB5;&#x5206;&#x522B;&#x90FD;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; React&#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x6309;&#x88C5;&#x8F7D;&#xFF0C;&#x66F4;&#x65B0;&#xFF0C;&#x9500;&#x6BC1;&#x4E09;&#x4E2A;&#x9636;&#x6BB5;&#x5206;&#x522B;&#x90FD;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;</p></h3>
<p>&#x89C1;&#x4E0A;</p>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-&#x8C03;&#x7528;thissetstate&#x4E4B;&#x540E;&#xFF0C;react&#x90FD;&#x505A;&#x4E86;&#x54EA;&#x4E9B;&#x64CD;&#x4F5C;&#xFF1F;&#x600E;&#x4E48;&#x62FF;&#x5230;&#x6539;&#x53D8;&#x540E;&#x7684;&#x503C;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-&#x8C03;&#x7528;thissetstate&#x4E4B;&#x540E;&#xFF0C;react&#x90FD;&#x505A;&#x4E86;&#x54EA;&#x4E9B;&#x64CD;&#x4F5C;&#xFF1F;&#x600E;&#x4E48;&#x62FF;&#x5230;&#x6539;&#x53D8;&#x540E;&#x7684;&#x503C;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-&#x8C03;&#x7528;thissetstate&#x4E4B;&#x540E;&#xFF0C;react&#x90FD;&#x505A;&#x4E86;&#x54EA;&#x4E9B;&#x64CD;&#x4F5C;&#xFF1F;&#x600E;&#x4E48;&#x62FF;&#x5230;&#x6539;&#x53D8;&#x540E;&#x7684;&#x503C;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-&#x8C03;&#x7528;thissetstate&#x4E4B;&#x540E;&#xFF0C;react&#x90FD;&#x505A;&#x4E86;&#x54EA;&#x4E9B;&#x64CD;&#x4F5C;&#xFF1F;&#x600E;&#x4E48;&#x62FF;&#x5230;&#x6539;&#x53D8;&#x540E;&#x7684;&#x503C;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-&#x8C03;&#x7528;thissetstate&#x4E4B;&#x540E;&#xFF0C;react&#x90FD;&#x505A;&#x4E86;&#x54EA;&#x4E9B;&#x64CD;&#x4F5C;&#xFF1F;&#x600E;&#x4E48;&#x62FF;&#x5230;&#x6539;&#x53D8;&#x540E;&#x7684;&#x503C;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605;&#x2605; &#x8C03;&#x7528;this.setState&#x4E4B;&#x540E;&#xFF0C;React&#x90FD;&#x505A;&#x4E86;&#x54EA;&#x4E9B;&#x64CD;&#x4F5C;&#xFF1F;&#x600E;&#x4E48;&#x62FF;&#x5230;&#x6539;&#x53D8;&#x540E;&#x7684;&#x503C;&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
        &#x5982;&#x679C;&#x662F;&#x5728;&#x96B6;&#x5C5E;&#x4E8E;&#x539F;&#x751F;js&#x6267;&#x884C;&#x7684;&#x7A7A;&#x95F4;&#xFF0C;&#x6BD4;&#x5982;&#x8BF4;setTimeout&#x91CC;&#x9762;&#xFF0C;setState&#x662F;&#x540C;&#x6B65;&#x7684;&#xFF0C;&#x90A3;&#x4E48;&#x6BCF;&#x6B21;&#x6267;&#x884C;setState&#x5C06;&#x7ACB;&#x5373;&#x66F4;&#x65B0;this.state&#xFF0C;&#x7136;&#x540E;&#x89E6;&#x53D1;render&#x65B9;&#x6CD5;&#xFF1B;&#x56E0;&#x4E3A;&#x662F;&#x540C;&#x6B65;&#x6267;&#x884C;&#xFF0C;&#x53EF;&#x4EE5;&#x76F4;&#x63A5;&#x83B7;&#x53D6;&#x6539;&#x53D8;&#x540E;&#x7684;&#x503C;&#xFF1B;
        &#x5982;&#x679C;&#x662F;&#x5728;&#x88AB;react&#x5904;&#x7406;&#x8FC7;&#x7684;&#x7A7A;&#x95F4;&#x6267;&#x884C;&#xFF0C;&#x6BD4;&#x5982;&#x8BF4;&#x5408;&#x6210;&#x4E8B;&#x4EF6;&#x91CC;&#xFF0C;&#x6B64;&#x65F6;setState&#x662F;&#x5F02;&#x6B65;&#x6267;&#x884C;&#x7684;&#xFF0C;&#x5E76;&#x4E0D;&#x4F1A;&#x7ACB;&#x5373;&#x66F4;&#x65B0;this.state&#x7684;&#x503C;&#xFF0C;&#x5F53;&#x6267;&#x884C;setState&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x4F1A;&#x5C06;&#x9700;&#x8981;&#x66F4;&#x65B0;&#x7684;state&#x653E;&#x5165;&#x72B6;&#x6001;&#x961F;&#x5217;&#xFF0C;&#x5728;&#x8FD9;&#x4E2A;&#x7A7A;&#x95F4;&#x6700;&#x540E;&#x518D;&#x5408;&#x5E76;&#x4FEE;&#x6539;this.state&#xFF0C;&#x89E6;&#x53D1;render&#xFF1B;setState&#x63A5;&#x53D7;&#x7B2C;&#x4E8C;&#x4E2A;&#x53C2;&#x6570;&#xFF0C;&#x662F;&#x4E00;&#x4E2A;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#xFF0C;&#x53EF;&#x4EE5;&#x5728;&#x8FD9;&#x91CC;&#x83B7;&#x53D6;&#x6539;&#x53D8;&#x540E;&#x7684;state&#x503C;&#xFF1B;
        &#x89E6;&#x53D1;render&#x6267;&#x884C;&#x540E;&#xFF0C;&#x4F1A;&#x751F;&#x6210;&#x4E00;&#x4E2A;&#x65B0;&#x7684;&#x865A;&#x62DF;dom&#x7ED3;&#x6784;&#xFF0C;&#x7136;&#x540E;&#x89E6;&#x53D1;diff&#x8FD0;&#x7B97;&#xFF0C;&#x627E;&#x5230;&#x53D8;&#x5316;&#x7684;&#x5730;&#x65B9;&#xFF0C;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#xFF1B;        
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x5982;&#x679C;&#x6211;&#x8FDB;&#x884C;&#x4E09;&#x6B21;setstate&#x4F1A;&#x53D1;&#x751F;&#x4EC0;&#x4E48;"><a name="&#x2605;&#x2605;&#x2605;-&#x5982;&#x679C;&#x6211;&#x8FDB;&#x884C;&#x4E09;&#x6B21;setstate&#x4F1A;&#x53D1;&#x751F;&#x4EC0;&#x4E48;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x5982;&#x679C;&#x6211;&#x8FDB;&#x884C;&#x4E09;&#x6B21;setstate&#x4F1A;&#x53D1;&#x751F;&#x4EC0;&#x4E48;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x5982;&#x679C;&#x6211;&#x8FDB;&#x884C;&#x4E09;&#x6B21;setstate&#x4F1A;&#x53D1;&#x751F;&#x4EC0;&#x4E48;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x5982;&#x679C;&#x6211;&#x8FDB;&#x884C;&#x4E09;&#x6B21;setstate&#x4F1A;&#x53D1;&#x751F;&#x4EC0;&#x4E48;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x5982;&#x679C;&#x6211;&#x8FDB;&#x884C;&#x4E09;&#x6B21;setState&#x4F1A;&#x53D1;&#x751F;&#x4EC0;&#x4E48;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">// &#x770B;&#x60C5;&#x51B5;&#xFF0C;&#x5982;&#x679C;&#x662F;&#x5728;&#x539F;&#x751F;js&#x7A7A;&#x95F4;&#xFF0C;&#x5219;&#x4F1A;&#x540C;&#x6B65;&#x6267;&#x884C;&#xFF0C;&#x4FEE;&#x6539;&#x4E09;&#x6B21;state&#x7684;&#x503C;&#xFF0C;&#x8C03;&#x7528;&#x4E09;&#x6B21;render&#x51FD;&#x6570;&#xFF1B;&#x5982;&#x679C;&#x662F;&#x5728;react&#x51FD;&#x6570;&#x7A7A;&#x95F4;&#x4E0B;&#xFF0C;&#x5219;&#x4F1A;&#x8FDB;&#x884C;&#x5408;&#x5E76;&#xFF0C;&#x53EA;&#x4FEE;&#x6539;&#x4E00;&#x6B21;state&#x7684;&#x503C;&#xFF0C;&#x8C03;&#x7528;&#x4E00;&#x6B21;render&#x3002;</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x5FAA;&#x73AF;&#x6267;&#x884C;setstate&#x7EC4;&#x4EF6;&#x4F1A;&#x4E00;&#x76F4;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x5417;&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-&#x5FAA;&#x73AF;&#x6267;&#x884C;setstate&#x7EC4;&#x4EF6;&#x4F1A;&#x4E00;&#x76F4;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x5417;&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x5FAA;&#x73AF;&#x6267;&#x884C;setstate&#x7EC4;&#x4EF6;&#x4F1A;&#x4E00;&#x76F4;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x5417;&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x5FAA;&#x73AF;&#x6267;&#x884C;setstate&#x7EC4;&#x4EF6;&#x4F1A;&#x4E00;&#x76F4;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x5417;&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x5FAA;&#x73AF;&#x6267;&#x884C;setstate&#x7EC4;&#x4EF6;&#x4F1A;&#x4E00;&#x76F4;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x5417;&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x5FAA;&#x73AF;&#x6267;&#x884C;setState&#x7EC4;&#x4EF6;&#x4F1A;&#x4E00;&#x76F4;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x5417;&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#xFF1F;</p></h3>
<p>&#x89C1;&#x4E0A;</p>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x6E32;&#x67D3;&#x4E00;&#x4E2A;react&#x7EC4;&#x4EF6;&#x7684;&#x8FC7;&#x7A0B;"><a name="&#x2605;&#x2605;&#x2605;-&#x6E32;&#x67D3;&#x4E00;&#x4E2A;react&#x7EC4;&#x4EF6;&#x7684;&#x8FC7;&#x7A0B;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x6E32;&#x67D3;&#x4E00;&#x4E2A;react&#x7EC4;&#x4EF6;&#x7684;&#x8FC7;&#x7A0B;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x6E32;&#x67D3;&#x4E00;&#x4E2A;react&#x7EC4;&#x4EF6;&#x7684;&#x8FC7;&#x7A0B;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x6E32;&#x67D3;&#x4E00;&#x4E2A;react&#x7EC4;&#x4EF6;&#x7684;&#x8FC7;&#x7A0B;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x6E32;&#x67D3;&#x4E00;&#x4E2A;react&#x7EC4;&#x4EF6;&#x7684;&#x8FC7;&#x7A0B;</p></h3>
<pre><code class="lang-jsx"><span class="hljs-comment">/*
        1&#x3001;babel&#x7F16;&#x8BD1;
        &#x5F53;&#x6211;&#x4EEC;&#x5BF9;&#x4EE3;&#x7801;&#x8FDB;&#x884C;&#x7F16;&#x8BD1;&#x7684;&#x65F6;&#x5019;&#xFF0C;babel&#x4F1A;&#x5C06;&#x6211;&#x4EEC;&#x5728;&#x7EC4;&#x4EF6;&#x4E2D;&#x7F16;&#x5199;&#x7684;jsx&#x4EE3;&#x7801;&#x8F6C;&#x5316;&#x4E3A;React.createElement&#x7684;&#x8868;&#x8FBE;&#x5F0F;&#xFF0C;createElement&#x65B9;&#x6CD5;&#x6709;&#x4E09;&#x4E2A;&#x53C2;&#x6570;&#xFF0C;&#x5206;&#x522B;&#x4E3A;type(&#x5143;&#x7D20;&#x7C7B;&#x578B;&#xFF09;&#x3001;attributes(&#x5143;&#x7D20;&#x6240;&#x6709;&#x5C5E;&#x6027;)&#x3001;children(&#x5143;&#x7D20;&#x6240;&#x6709;&#x5B50;&#x8282;&#x70B9;)&#xFF1B;
        2&#x3001;&#x751F;&#x6210;element
        &#x5F53;render&#x65B9;&#x6CD5;&#x88AB;&#x89E6;&#x53D1;&#x4EE5;&#x540E;&#xFF0C;createElement&#x65B9;&#x6CD5;&#x4F1A;&#x6267;&#x884C;&#xFF0C;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;element&#x5BF9;&#x8C61;&#xFF0C;&#x8FD9;&#x4E2A;&#x5BF9;&#x8C61;&#x63CF;&#x8FF0;&#x4E86;&#x771F;&#x5B9E;&#x8282;&#x70B9;&#x7684;&#x4FE1;&#x606F;&#xFF0C;&#x5176;&#x5B9E;&#x5C31;&#x662F;&#x865A;&#x62DF;dom&#x8282;&#x70B9;&#xFF1B;
        3&#x3001;&#x751F;&#x6210;&#x771F;&#x5B9E;&#x8282;&#x70B9;(&#x521D;&#x6B21;&#x6E32;&#x67D3;)
        &#x8FD9;&#x65F6;&#x5019;&#x6211;&#x4EEC;&#x4F1A;&#x5224;&#x65AD;element&#x7684;&#x7C7B;&#x578B;&#xFF0C;&#x5982;&#x679C;&#x662F;null&#x3001;false&#x5219;&#x5B9E;&#x4F8B;&#x4E00;&#x4E2A;ReactDOMEmptyComponent&#x5BF9;&#x8C61;; &#x662F;string&#x3001;number&#x7C7B;&#x578B;&#x7684;&#x8BDD;&#x5219;&#x5B9E;&#x4F8B;&#x4E00;&#x4E2A;ReactDOMTextComponent&#x5BF9;&#x8C61;&#xFF1B; &#x5982;&#x679C;element&#x662F;&#x5BF9;&#x8C61;&#x7684;&#x8BDD;&#xFF0C;&#x4F1A;&#x8FDB;&#x4E00;&#x6B65;&#x5224;&#x65AD;type&#x5143;&#x7D20;&#x7C7B;&#x578B;&#xFF0C;&#x662F;&#x539F;&#x751F;dom&#x5143;&#x7D20;&#xFF0C;&#x5219;&#x5B9E;&#x4F8B;&#x5316;ReactDOMComponent&#xFF1B; &#x5982;&#x679C;&#x662F;&#x81EA;&#x5B9A;&#x4E49;&#x7EC4;&#x4EF6;&#xFF0C;&#x5219;&#x5B9E;&#x4F8B;&#x5316;ReactCompositeComponentWrapper&#xFF1B;
        &#x5728;&#x8FD9;&#x4E9B;&#x7C7B;&#x751F;&#x6210;&#x5B9E;&#x4F8B;&#x5BF9;&#x8C61;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x5728;&#x5176;&#x5185;&#x90E8;&#x4F1A;&#x8C03;&#x7528; mountComponent&#x65B9;&#x6CD5;&#xFF0C;&#x8FD9;&#x4E2A;&#x65B9;&#x6CD5;&#x91CC;&#x9762;&#x6709;&#x4E00;&#x7CFB;&#x5217;&#x6D4F;&#x89C8;&#x5668;&#x539F;&#x751F;dom&#x65B9;&#x6CD5;&#xFF0C;&#x53EF;&#x4EE5;&#x5C06;element&#x6E32;&#x67D3;&#x6210;&#x771F;&#x5B9E;&#x7684;dom&#x5E76;&#x63D2;&#x5165;&#x5230;&#x6587;&#x6863;&#x4E2D;&#xFF1B;
        4&#x3001;&#x751F;&#x547D;&#x5468;&#x671F;
        componentDidMount&#xFF1A;&#x4F1A;&#x5728;&#x7EC4;&#x4EF6;&#x6302;&#x8F7D;&#x540E;(&#x63D2;&#x5165;DOM&#x6811;&#x4E2D;) &#x7ACB;&#x5373;&#x8C03;&#x7528;&#x3002;&#x4E00;&#x822C;&#x53EF;&#x4EE5;&#x5728;&#x8FD9;&#x91CC;&#x8BF7;&#x6C42;&#x6570;&#x636E;&#xFF1B;
        componentDidUpdate&#xFF1A;&#x4F1A;&#x5728;&#x6570;&#x636E;&#x66F4;&#x65B0;&#x540E;&#x7ACB;&#x5373;&#x8C03;&#x7528;&#xFF0C;&#x9996;&#x6B21;&#x6E32;&#x67D3;&#x4E0D;&#x4F1A;&#x6267;&#x884C;&#x6B64;&#x65B9;&#x6CD5;&#xFF1B;&#x53EF;&#x4EE5;&#x5728;&#x5176;&#x4E2D;&#x76F4;&#x63A5;&#x8C03;&#x7528; setState&#xFF0C;&#x4F46;&#x5FC5;&#x987B;&#x7528;if&#x8BED;&#x53E5;&#x8FDB;&#x884C;&#x5224;&#x65AD;&#xFF0C;&#x9632;&#x6B62;&#x6B7B;&#x5FAA;&#x73AF;&#xFF1B;
        conponentWillUnmount&#xFF1A;&#x4F1A;&#x5728;&#x7EC4;&#x4EF6;&#x5378;&#x8F7D;&#x53CA;&#x9500;&#x6BC1;&#x4E4B;&#x524D;&#x8C03;&#x7528;&#xFF0C;&#x5728;&#x6B64;&#x65B9;&#x6CD5;&#x4E2D;&#x6267;&#x884C;&#x5FC5;&#x8981;&#x7684;&#x6E05;&#x7406;&#x64CD;&#x4F5C;&#xFF0C;&#x5982;&#x6E05;&#x9664;timer&#xFF1B;
        static getDerivedStateFromProps(prps,state)&#xFF1A;&#x8FD9;&#x4E2A;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#x4EE3;&#x66FF;&#x4E86;componentWillMount&#x548C;componentWillUpdate&#x751F;&#x547D;&#x5468;&#x671F;&#xFF1B;props&#x548C;state&#x53D1;&#x751F;&#x6539;&#x53D8;&#x5219;&#x8C03;&#x7528;&#xFF0C;&#x5728;&#x521D;&#x59CB;&#x5316;&#x6302;&#x8F7D;&#x53CA;&#x540E;&#x7EED;&#x66F4;&#x65B0;&#x65F6;&#x90FD;&#x4F1A;&#x88AB;&#x8C03;&#x7528;&#xFF0C;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#x6765;&#x66F4;&#x65B0;state&#xFF0C;&#x5982;&#x679C;&#x8FD4;&#x56DE;null&#x5219;&#x4E0D;&#x66F4;&#x65B0;&#x4EFB;&#x4F55;&#x5185;&#x5BB9;&#xFF1B;
        shouldComponentUpdate(nextProps,nextState)&#xFF1A;&#x8FD9;&#x4E2A;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#x7684;&#x8FD4;&#x56DE;&#x503C;&#x7528;&#x6765;&#x5224;&#x65AD;React&#x7EC4;&#x4EF6;&#x662F;&#x5426;&#x56E0;&#x4E3A;&#x5F53;&#x524D; state &#x6216; props &#x66F4;&#x6539;&#x800C;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#xFF0C;&#x9ED8;&#x8BA4;&#x8FD4;&#x56DE;&#x503C;&#x662F;true&#xFF1B;&#x8FD9;&#x4E2A;&#x65B9;&#x6CD5;&#x5728;&#x521D;&#x59CB;&#x5316;&#x6E32;&#x67D3;&#x6216;&#x4F7F;&#x7528;forceUpdate()&#x65F6;&#x4E0D;&#x4F1A;&#x8C03;&#x7528;&#xFF1B;&#x5F53;&#x5C06;&#x65E7;&#x7684;state&#x7684;&#x503C;&#x539F;&#x5C01;&#x4E0D;&#x52A8;&#x8D4B;&#x503C;&#x7ED9;&#x65B0;&#x7684;state&#xFF08;&#x5373;&#x4E0D;&#x6539;&#x53D8;state&#x7684;&#x503C;&#xFF0C;&#x4F46;&#x662F;&#x8C03;&#x7528;&#x4E86;setState&#xFF09;&#x548C; &#x65E0;&#x6570;&#x636E;&#x4EA4;&#x6362;&#x7684;&#x7236;&#x7EC4;&#x4EF6;&#x7684;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x90FD;&#x4F1A;&#x5BFC;&#x81F4;&#x7EC4;&#x4EF6;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#xFF0C;&#x8FD9;&#x65F6;&#x5019;&#x90FD;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;shouldComponentUpdate&#x6765;&#x4F18;&#x5316;&#x3002;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-react&#x7C7B;&#x7EC4;&#x4EF6;&#xFF0C;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#xFF0C;&#x5728;&#x7C7B;&#x7EC4;&#x4EF6;&#x4FEE;&#x6539;&#x7EC4;&#x4EF6;&#x5BF9;&#x8C61;&#x4F1A;&#x4F7F;&#x7528;&#x3002;"><a name="&#x2605;&#x2605;&#x2605;-react&#x7C7B;&#x7EC4;&#x4EF6;&#xFF0C;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#xFF0C;&#x5728;&#x7C7B;&#x7EC4;&#x4EF6;&#x4FEE;&#x6539;&#x7EC4;&#x4EF6;&#x5BF9;&#x8C61;&#x4F1A;&#x4F7F;&#x7528;&#x3002;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x7C7B;&#x7EC4;&#x4EF6;&#xFF0C;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#xFF0C;&#x5728;&#x7C7B;&#x7EC4;&#x4EF6;&#x4FEE;&#x6539;&#x7EC4;&#x4EF6;&#x5BF9;&#x8C61;&#x4F1A;&#x4F7F;&#x7528;&#x3002;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-react&#x7C7B;&#x7EC4;&#x4EF6;&#xFF0C;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#xFF0C;&#x5728;&#x7C7B;&#x7EC4;&#x4EF6;&#x4FEE;&#x6539;&#x7EC4;&#x4EF6;&#x5BF9;&#x8C61;&#x4F1A;&#x4F7F;&#x7528;&#x3002;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x7C7B;&#x7EC4;&#x4EF6;&#xFF0C;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#xFF0C;&#x5728;&#x7C7B;&#x7EC4;&#x4EF6;&#x4FEE;&#x6539;&#x7EC4;&#x4EF6;&#x5BF9;&#x8C61;&#x4F1A;&#x4F7F;&#x7528;&#x3002;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; React&#x7C7B;&#x7EC4;&#x4EF6;&#xFF0C;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#xFF0C;&#x5728;&#x7C7B;&#x7EC4;&#x4EF6;&#x4FEE;&#x6539;&#x7EC4;&#x4EF6;&#x5BF9;&#x8C61;&#x4F1A;&#x4F7F;&#x7528;&#x3002;</p></h3>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-&#x7C7B;&#x7EC4;&#x4EF6;&#x600E;&#x4E48;&#x505A;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF1F;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x600E;&#x4E48;&#x505A;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-&#x7C7B;&#x7EC4;&#x4EF6;&#x600E;&#x4E48;&#x505A;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF1F;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x600E;&#x4E48;&#x505A;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x7C7B;&#x7EC4;&#x4EF6;&#x600E;&#x4E48;&#x505A;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF1F;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x600E;&#x4E48;&#x505A;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-&#x7C7B;&#x7EC4;&#x4EF6;&#x600E;&#x4E48;&#x505A;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF1F;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x600E;&#x4E48;&#x505A;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x7C7B;&#x7EC4;&#x4EF6;&#x600E;&#x4E48;&#x505A;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF1F;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x600E;&#x4E48;&#x505A;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; &#x7C7B;&#x7EC4;&#x4EF6;&#x600E;&#x4E48;&#x505A;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF1F;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x600E;&#x4E48;&#x505A;&#x6027;&#x80FD;&#x4F18;&#x5316;&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
&#x7C7B;&#x7EC4;&#x4EF6;&#xFF1A;
    &#xFF08;1&#xFF09;&#x4F7F;&#x7528;shouldComponentUpdate&#xFF1A;&#x8FD9;&#x4E2A;&#x751F;&#x547D;&#x5468;&#x671F;&#x53EF;&#x4EE5;&#x8BA9;&#x6211;&#x4EEC;&#x51B3;&#x5B9A;&#x5F53;&#x524D;&#x72B6;&#x6001;&#x6216;&#x5C5E;&#x6027;&#x7684;&#x6539;&#x53D8;&#x662F;&#x5426;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x7EC4;&#x4EF6;&#xFF0C;&#x9ED8;&#x8BA4;&#x8FD4;&#x56DE;ture&#xFF0C;&#x8FD4;&#x56DE;false&#x65F6;&#x4E0D;&#x4F1A;&#x6267;&#x884C;render&#xFF0C;&#x5728;&#x521D;&#x59CB;&#x5316;&#x6E32;&#x67D3;&#x6216;&#x4F7F;&#x7528;forceUpdate()&#x65F6;&#x4E0D;&#x4F1A;&#x8C03;&#x7528;&#xFF1B;&#x5982;&#x679C;&#x5728;shouldComponentUpdate&#x6BD4;&#x8F83;&#x7684;&#x503C;&#x662F;&#x5F15;&#x7528;&#x7C7B;&#x578B;&#x7684;&#x8BDD;&#xFF0C;&#x53EF;&#x80FD;&#x8FBE;&#x4E0D;&#x5230;&#x6211;&#x4EEC;&#x60F3;&#x8981;&#x7684;&#x6548;&#x679C;&#xFF0C;&#x56E0;&#x4E3A;&#x5F15;&#x7528;&#x7C7B;&#x578B;&#x6307;&#x5411;&#x540C;&#x4E00;&#x4E2A;&#x5730;&#x5740;&#xFF1B;
        &#x5F53;&#x5C06;&#x65E7;&#x7684;state&#x7684;&#x503C;&#x539F;&#x5C01;&#x4E0D;&#x52A8;&#x8D4B;&#x503C;&#x7ED9;&#x65B0;&#x7684;state&#xFF08;&#x5373;&#x4E0D;&#x6539;&#x53D8;state&#x7684;&#x503C;&#xFF0C;&#x4F46;&#x662F;&#x8C03;&#x7528;&#x4E86;setState&#xFF09;&#x548C; &#x65E0;&#x6570;&#x636E;&#x4EA4;&#x6362;&#x7684;&#x7236;&#x7EC4;&#x4EF6;&#x7684;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x90FD;&#x4F1A;&#x5BFC;&#x81F4;&#x7EC4;&#x4EF6;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#xFF0C;&#x8FD9;&#x65F6;&#x5019;&#x90FD;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;shouldComponentUpdate&#x6765;&#x4F18;&#x5316;&#xFF1B;
    &#xFF08;2&#xFF09;React.PureComponent&#xFF1A;&#x57FA;&#x672C;&#x4E0A;&#x548C;Component&#x7528;&#x6CD5;&#x4E00;&#x81F4;&#xFF0C;&#x4E0D;&#x540C;&#x4E4B;&#x5904;&#x5728;&#x4E8E; PureComponent&#x4E0D;&#x9700;&#x8981;&#x5F00;&#x53D1;&#x8005;&#x81EA;&#x5DF1;&#x8BBE;&#x7F6E;shouldComponentUpdate&#xFF0C;&#x56E0;&#x4E3A;PureComponent&#x81EA;&#x5E26;&#x901A;&#x8FC7;props&#x548C;state&#x7684;&#x6D45;&#x5BF9;&#x6BD4;&#x6765;&#x5B9E;&#x73B0; shouldComponentUpate&#xFF1B;&#x4F46;&#x662F;&#x5982;&#x679C;props&#x548C;state&#x5BF9;&#x8C61;&#x5305;&#x542B;&#x590D;&#x6742;&#x7684;&#x6570;&#x636E;&#x7ED3;&#x6784;&#xFF0C;&#x5B83;&#x53EF;&#x80FD;&#x4F1A;&#x5224;&#x65AD;&#x9519;&#x8BEF;(&#x8868;&#x73B0;&#x4E3A;&#x5BF9;&#x8C61;&#x6DF1;&#x5C42;&#x7684;&#x6570;&#x636E;&#x5DF2;&#x6539;&#x53D8;&#xFF0C;&#x89C6;&#x56FE;&#x5374;&#x6CA1;&#x6709;&#x66F4;&#x65B0;&#xFF09;&#xFF1B;
    &#xFF08;4&#xFF09;&#x4F7F;&#x7528;Immutable&#xFF1A;immutable&#x662F;&#x4E00;&#x79CD;&#x6301;&#x4E45;&#x5316;&#x6570;&#x636E;&#xFF0C;&#x4E00;&#x65E6;&#x88AB;&#x521B;&#x5EFA;&#x5C31;&#x4E0D;&#x4F1A;&#x88AB;&#x4FEE;&#x6539;&#xFF0C;&#x4FEE;&#x6539;immutable&#x5BF9;&#x8C61;&#x7684;&#x65F6;&#x5019;&#x8FD4;&#x56DE;&#x65B0;&#x7684;immutable&#xFF1B;&#x4E5F;&#x5C31;&#x662F;&#x8BF4;&#x5728;&#x4F7F;&#x7528;&#x65E7;&#x6570;&#x636E;&#x521B;&#x5EFA;&#x65B0;&#x6570;&#x636E;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x4F1A;&#x4FDD;&#x8BC1;&#x65E7;&#x6570;&#x636E;&#x540C;&#x65F6;&#x53EF;&#x7528;&#x4E14;&#x4E0D;&#x53D8;&#xFF1B;&#x4E3A;&#x4E86;&#x907F;&#x514D;&#x6DF1;&#x5EA6;&#x590D;&#x5236;&#x6240;&#x6709;&#x8282;&#x70B9;&#x7684;&#x5E26;&#x6765;&#x7684;&#x6027;&#x80FD;&#x635F;&#x8017;&#xFF0C;immutable&#x4F7F;&#x7528;&#x4E86;&#x7ED3;&#x6784;&#x5171;&#x4EAB;&#xFF0C;&#x5373;&#x5982;&#x679C;&#x5BF9;&#x8C61;&#x6811;&#x4E2D;&#x7684;&#x4E00;&#x4E2A;&#x8282;&#x70B9;&#x53D1;&#x751F;&#x53D8;&#x5316;&#xFF0C;&#x53EA;&#x4FEE;&#x6539;&#x8FD9;&#x4E2A;&#x8282;&#x70B9;&#x548C;&#x53D7;&#x4ED6;&#x5F71;&#x54CD;&#x7684;&#x7236;&#x8282;&#x70B9;&#xFF0C;&#x5176;&#x4ED6;&#x8282;&#x70B9;&#x4ECD;&#x7136;&#x5171;&#x4EAB;&#xFF1B;
    &#xFF08;5&#xFF09;bind&#x51FD;&#x6570;&#xFF1A;&#x5728;react&#x4E2D;&#x6539;&#x53D8;this&#x7684;&#x6307;&#x5411;&#x6709;&#x4E09;&#x79CD;&#x65B9;&#x6CD5;&#xFF0C;a)constructor&#x4E2D;&#x7528;bind&#x7ED1;&#x5B9A;; b)&#x4F7F;&#x7528;&#x65F6;&#x901A;&#x8FC7;bind&#x7ED1;&#x5B9A;; 3)&#x4F7F;&#x7528;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#xFF1B;&#x9009;&#x62E9;&#x7B2C;&#x4E00;&#x79CD;&#x53EA;&#x5728;&#x7EC4;&#x4EF6;&#x521D;&#x59CB;&#x5316;&#x7684;&#x65F6;&#x5019;&#x6267;&#x884C;&#x4E00;&#x6B21;&#xFF0C;&#x7B2C;&#x4E8C;&#x79CD;&#x7EC4;&#x4EF6;&#x5728;&#x6BCF;&#x6B21;render&#x90FD;&#x8981;&#x91CD;&#x65B0;&#x7ED1;&#x5B9A;&#xFF0C;&#x7B2C;&#x4E09;&#x79CD;&#x5728;&#x6BCF;&#x6B21;render&#x65F6;&#x5019;&#x90FD;&#x4F1A;&#x751F;&#x6210;&#x65B0;&#x7684;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#xFF0C;&#x6240;&#x4EE5;&#x9009;&#x62E9;&#x7B2C;&#x4E00;&#x79CD;&#xFF1B;

&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#xFF1A;
    &#xFF08;1&#xFF09;useCallback&#xFF1A;&#x63A5;&#x6536;&#x4E00;&#x4E2A;&#x51FD;&#x6570;&#x4F5C;&#x4E3A;&#x53C2;&#x6570;&#xFF0C;&#x63A5;&#x6536;&#x7B2C;&#x4E8C;&#x4E2A;&#x53C2;&#x6570;&#x4F5C;&#x4E3A;&#x4F9D;&#x8D56;&#x5217;&#x8868;&#xFF0C;&#x8FD4;&#x56DE;&#x503C;&#x4E3A;&#x51FD;&#x6570;&#xFF0C;&#x6709;&#x52A9;&#x4E8E;&#x907F;&#x514D;&#x5728;&#x6BCF;&#x6B21;&#x6E32;&#x67D3;&#x65F6;&#x90FD;&#x8FDB;&#x884C;&#x9AD8;&#x5F00;&#x9500;&#x7684;&#x8BA1;&#x7B97;&#xFF0C;&#x4EC5;&#x4F1A;&#x5728;&#x67D0;&#x4E2A;&#x4F9D;&#x8D56;&#x9879;&#x6539;&#x53D8;&#x65F6;&#x624D;&#x91CD;&#x65B0;&#x8BA1;&#x7B97;&#xFF1B;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;useCallback&#x628A;&#x8981;&#x4F20;&#x9012;&#x7ED9;&#x5B50;&#x7EC4;&#x4EF6;&#x7684;&#x51FD;&#x6570;&#x5305;&#x88F9;&#x8D77;&#x6765;&#xFF0C;&#x8FD9;&#x6837;&#x7236;&#x7EC4;&#x4EF6;&#x5237;&#x65B0;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x4F20;&#x9012;&#x7ED9;&#x5B50;&#x7EC4;&#x4EF6;&#x7684;&#x51FD;&#x6570;&#x6307;&#x5411;&#x4E0D;&#x4F1A;&#x53D1;&#x751F;&#x6539;&#x53D8;&#xFF0C;&#x53EF;&#x4EE5;&#x51CF;&#x5C11;&#x5B50;&#x7EC4;&#x4EF6;&#x7684;&#x6E32;&#x67D3;&#x6B21;&#x6570;&#xFF1B;
            const handleUseCallback=useCallback(handleClick,[])
            &lt;Child handleClick={handleUseCallback} /&gt;
    &#xFF08;2&#xFF09;useMemo&#xFF1A;useMemo&#x7684;&#x4F7F;&#x7528;&#x548C;useCallback&#x5DEE;&#x4E0D;&#x591A;&#xFF0C;&#x53EA;&#x662F;useCallback&#x8FD4;&#x56DE;&#x7684;&#x662F;&#x4E00;&#x4E2A;&#x51FD;&#x6570;&#xFF0C;useMemo&#x8FD4;&#x56DE;&#x503C;&#x53EF;&#x4EE5;&#x662F;&#x51FD;&#x6570;&#x3001;&#x5BF9;&#x8C61;&#x7B49;&#x90FD;&#x53EF;&#x4EE5;&#xFF1B;

&#x4E24;&#x8005;&#x90FD;&#x53EF;&#x4F7F;&#x7528;&#xFF1A;
    &#xFF08;1&#xFF09;React.memo&#xFF1A;React.memo &#x529F;&#x80FD;&#x540C;React.PureComponent&#xFF0C;&#x4F46;React.memo&#x662F;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#xFF0C;&#x65E2;&#x53EF;&#x4EE5;&#x7528;&#x5728;&#x7C7B;&#x7EC4;&#x4EF6;&#x4E2D;&#x4E5F;&#x53EF;&#x4EE5;&#x7528;&#x5728;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x4E2D;&#xFF1B;memo&#x8FD8;&#x53EF;&#x4EE5;&#x63A5;&#x6536;&#x7B2C;&#x4E8C;&#x4E2A;&#x53C2;&#x6570;&#xFF0C;&#x662F;&#x4E00;&#x4E2A;&#x53EF;&#x5B9A;&#x5236;&#x5316;&#x7684;&#x6BD4;&#x8F83;&#x51FD;&#x6570;&#xFF0C;&#x5176;&#x8FD4;&#x56DE;&#x503C;&#x4E0E; shouldComponentUpdate&#x7684;&#x76F8;&#x53CD;&#xFF1B;
    &#xFF08;2&#xFF09;&#x4F7F;&#x7528;key&#xFF1A;&#x5728;&#x5217;&#x8868;&#x6E32;&#x67D3;&#x65F6;&#x4F7F;&#x7528;key&#xFF0C;&#x8FD9;&#x6837;&#x5F53;&#x7EC4;&#x4EF6;&#x53D1;&#x751F;&#x589E;&#x5220;&#x6539;&#x3001;&#x6392;&#x5E8F;&#x7B49;&#x64CD;&#x4F5C;&#x65F6;&#xFF0C;diff&#x8FD0;&#x7B97;&#x540E;&#x53EF;&#x4EE5;&#x6839;&#x636E;key&#x503C;&#x76F4;&#x63A5;&#x8C03;&#x6574;DOM&#x987A;&#x5E8F;&#xFF0C;&#x907F;&#x514D;&#x4E0D;&#x5FC5;&#x8981;&#x7684;&#x6E32;&#x67D3;&#x800C;&#x907F;&#x514D;&#x6027;&#x80FD;&#x7684;&#x6D6A;&#x8D39;&#xFF1B;
    &#xFF08;3&#xFF09;&#x4E0D;&#x8981;&#x6EE5;&#x7528;props&#xFF1A;&#x5C3D;&#x91CF;&#x53EA;&#x4F20;&#x9700;&#x8981;&#x7684;&#x6570;&#x636E;&#xFF0C;&#x907F;&#x514D;&#x591A;&#x4F59;&#x7684;&#x66F4;&#x65B0;&#xFF0C;&#x5C3D;&#x91CF;&#x907F;&#x514D;&#x4F7F;&#x7528;{&#x2026;props}&#xFF1B;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-useeffect-&#x548C;-uselayouteffect-&#x7684;&#x533A;&#x522B;"><a name="&#x2605;&#x2605;&#x2605;-useeffect-&#x548C;-uselayouteffect-&#x7684;&#x533A;&#x522B;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-useeffect-&#x548C;-uselayouteffect-&#x7684;&#x533A;&#x522B;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-useeffect-&#x548C;-uselayouteffect-&#x7684;&#x533A;&#x522B;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-useeffect-&#x548C;-uselayouteffect-&#x7684;&#x533A;&#x522B;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; useEffect &#x548C; useLayoutEffect &#x7684;&#x533A;&#x522B;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*    
2&#x3001;useEffect&#x548C;useLayout&#x90FD;&#x662F;&#x526F;&#x4F5C;&#x7528;hooks&#xFF0C;&#x4E24;&#x5219;&#x975E;&#x5E38;&#x76F8;&#x4F3C;&#xFF0C;&#x540C;&#x6837;&#x90FD;&#x63A5;&#x6536;&#x4E24;&#x4E2A;&#x53C2;&#x6570;&#xFF1A;
            (1)&#x7B2C;&#x4E00;&#x4E2A;&#x53C2;&#x6570;&#x4E3A;&#x51FD;&#x6570;&#xFF0C;&#x7B2C;&#x4E8C;&#x4E2A;&#x53C2;&#x6570;&#x4E3A;&#x4F9D;&#x8D56;&#x5217;&#x8868;&#xFF0C;&#x53EA;&#x6709;&#x4F9D;&#x8D56;&#x66F4;&#x65B0;&#x65F6;&#x624D;&#x4F1A;&#x6267;&#x884C;&#x51FD;&#x6570;&#xFF1B;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;&#x51FD;&#x6570;&#xFF0C;&#x5F53;&#x9875;&#x9762;&#x5237;&#x65B0;&#x7684;&#x6216;&#x9500;&#x6BC1;&#x7684;&#x65F6;&#x5019;&#x6267;&#x884C;return&#x540E;&#x7684;&#x4EE3;&#x7801;&#xFF1B;
            (2)&#x5982;&#x679C;&#x4E0D;&#x63A5;&#x53D7;&#x7B2C;&#x4E8C;&#x4E2A;&#x53C2;&#x6570;&#xFF0C;&#x90A3;&#x4E48;&#x5728;&#x7B2C;&#x4E00;&#x6B21;&#x6E32;&#x67D3;&#x5B8C;&#x6210;&#x4E4B;&#x540E;&#x548C;&#x6BCF;&#x6B21;&#x66F4;&#x65B0;&#x6E32;&#x67D3;&#x9875;&#x9762;&#x7684;&#x65F6;&#x5019;&#xFF0C;&#x90FD;&#x4F1A;&#x8C03;&#x7528;useEffect&#x7684;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#xFF1B;

        useEffect&#x548C; useLayout&#x7684;&#x4E3B;&#x8981;&#x533A;&#x522B;&#x5C31;&#x662F;&#x4ED6;&#x4EEC;&#x7684;&#x6267;&#x884C;&#x65F6;&#x673A;&#x4E0D;&#x540C;&#xFF0C;&#x5728;&#x6D4F;&#x89C8;&#x5668;&#x4E2D;js&#x7EBF;&#x7A0B;&#x4E0E;&#x6E32;&#x67D3;&#x7EBF;&#x7A0B;&#x662F;&#x4E92;&#x65A5;&#x7684;&#xFF0C;&#x5F53;js&#x7EBF;&#x7A0B;&#x6267;&#x884C;&#x65F6;&#xFF0C;&#x6E32;&#x67D3;&#x7EBF;&#x7A0B;&#x5448;&#x6302;&#x8D77;&#x72B6;&#x6001;&#xFF0C;&#x53EA;&#x6709;&#x5F53;js&#x7EBF;&#x7A0B;&#x7A7A;&#x95F2;&#x65F6;&#x6E32;&#x67D3;&#x7EBF;&#x7A0B;&#x624D;&#x4F1A;&#x6267;&#x884C;&#xFF0C;&#x5C06;&#x751F;&#x6210;&#x7684; dom&#x7ED8;&#x5236;&#x3002;useLayoutEffect&#x5728;js&#x7EBF;&#x7A0B;&#x6267;&#x884C;&#x5B8C;&#x6BD5;&#x5373;dom&#x66F4;&#x65B0;&#x4E4B;&#x540E;&#x7ACB;&#x5373;&#x6267;&#x884C;&#xFF0C;&#x800C;useEffect&#x662F;&#x5728;&#x6E32;&#x67D3;&#x7ED3;&#x675F;&#x540E;&#x624D;&#x6267;&#x884C;&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x8BF4; useLayoutEffect&#x6BD4; useEffect&#x5148;&#x6267;&#x884C;&#x3002;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-hooks-&#x7684;&#x4F7F;&#x7528;&#x6709;&#x4EC0;&#x4E48;&#x6CE8;&#x610F;&#x4E8B;&#x9879;"><a name="&#x2605;&#x2605;&#x2605;-hooks-&#x7684;&#x4F7F;&#x7528;&#x6709;&#x4EC0;&#x4E48;&#x6CE8;&#x610F;&#x4E8B;&#x9879;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-hooks-&#x7684;&#x4F7F;&#x7528;&#x6709;&#x4EC0;&#x4E48;&#x6CE8;&#x610F;&#x4E8B;&#x9879;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-hooks-&#x7684;&#x4F7F;&#x7528;&#x6709;&#x4EC0;&#x4E48;&#x6CE8;&#x610F;&#x4E8B;&#x9879;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-hooks-&#x7684;&#x4F7F;&#x7528;&#x6709;&#x4EC0;&#x4E48;&#x6CE8;&#x610F;&#x4E8B;&#x9879;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; hooks &#x7684;&#x4F7F;&#x7528;&#x6709;&#x4EC0;&#x4E48;&#x6CE8;&#x610F;&#x4E8B;&#x9879;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
        &#xFF08;1&#xFF09;&#x53EA;&#x80FD;&#x5728;React&#x51FD;&#x6570;&#x5F0F;&#x7EC4;&#x4EF6;&#x6216;&#x81EA;&#x5B9A;&#x4E49;Hook&#x4E2D;&#x4F7F;&#x7528;Hook&#x3002;
        &#xFF08;2&#xFF09;&#x4E0D;&#x8981;&#x5728;&#x5FAA;&#x73AF;&#xFF0C;&#x6761;&#x4EF6;&#x6216;&#x5D4C;&#x5957;&#x51FD;&#x6570;&#x4E2D;&#x8C03;&#x7528;Hook&#xFF0C;&#x5FC5;&#x987B;&#x59CB;&#x7EC8;&#x5728;React&#x51FD;&#x6570;&#x7684;&#x9876;&#x5C42;&#x4F7F;&#x7528;Hook&#x3002;&#x8FD9;&#x662F;&#x56E0;&#x4E3A;React&#x9700;&#x8981;&#x5229;&#x7528;&#x8C03;&#x7528;&#x987A;&#x5E8F;&#x6765;&#x6B63;&#x786E;&#x66F4;&#x65B0;&#x76F8;&#x5E94;&#x7684;&#x72B6;&#x6001;&#xFF0C;&#x4EE5;&#x53CA;&#x8C03;&#x7528;&#x76F8;&#x5E94;&#x7684;&#x94A9;&#x5B50;&#x51FD;&#x6570;&#x3002;&#x4E00;&#x65E6;&#x5728;&#x5FAA;&#x73AF;&#x6216;&#x6761;&#x4EF6;&#x5206;&#x652F;&#x8BED;&#x53E5;&#x4E2D;&#x8C03;&#x7528;Hook&#xFF0C;&#x5C31;&#x5BB9;&#x6613;&#x5BFC;&#x81F4;&#x8C03;&#x7528;&#x987A;&#x5E8F;&#x7684;&#x4E0D;&#x4E00;&#x81F4;&#x6027;&#xFF0C;&#x4ECE;&#x800C;&#x4EA7;&#x751F;&#x96BE;&#x4EE5;&#x9884;&#x6599;&#x5230;&#x7684;&#x540E;&#x679C;&#x3002;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x7EAF;&#x51FD;&#x6570;&#x6709;&#x4EC0;&#x4E48;&#x7279;&#x70B9;&#xFF0C;&#x526F;&#x4F5C;&#x7528;&#x51FD;&#x6570;&#x7279;&#x70B9;"><a name="&#x2605;&#x2605;&#x2605;-&#x7EAF;&#x51FD;&#x6570;&#x6709;&#x4EC0;&#x4E48;&#x7279;&#x70B9;&#xFF0C;&#x526F;&#x4F5C;&#x7528;&#x51FD;&#x6570;&#x7279;&#x70B9;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x7EAF;&#x51FD;&#x6570;&#x6709;&#x4EC0;&#x4E48;&#x7279;&#x70B9;&#xFF0C;&#x526F;&#x4F5C;&#x7528;&#x51FD;&#x6570;&#x7279;&#x70B9;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x7EAF;&#x51FD;&#x6570;&#x6709;&#x4EC0;&#x4E48;&#x7279;&#x70B9;&#xFF0C;&#x526F;&#x4F5C;&#x7528;&#x51FD;&#x6570;&#x7279;&#x70B9;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x7EAF;&#x51FD;&#x6570;&#x6709;&#x4EC0;&#x4E48;&#x7279;&#x70B9;&#xFF0C;&#x526F;&#x4F5C;&#x7528;&#x51FD;&#x6570;&#x7279;&#x70B9;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x7EAF;&#x51FD;&#x6570;&#x6709;&#x4EC0;&#x4E48;&#x7279;&#x70B9;&#xFF0C;&#x526F;&#x4F5C;&#x7528;&#x51FD;&#x6570;&#x7279;&#x70B9;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
        &#x7EAF;&#x51FD;&#x6570;&#x4E0E;&#x5916;&#x754C;&#x4EA4;&#x6362;&#x6570;&#x636E;&#x53EA;&#x6709;&#x4E00;&#x4E2A;&#x552F;&#x4E00;&#x6E20;&#x9053;&#x2014;&#x2014;&#x53C2;&#x6570;&#x548C;&#x8FD4;&#x56DE;&#x503C;&#xFF1B;&#x51FD;&#x6570;&#x4ECE;&#x51FD;&#x6570;&#x5916;&#x90E8;&#x63A5;&#x53D7;&#x7684;&#x6240;&#x6709;&#x8F93;&#x5165;&#x4FE1;&#x606F;&#x90FD;&#x901A;&#x8FC7;&#x53C2;&#x6570;&#x4F20;&#x9012;&#x5230;&#x8BE5;&#x51FD;&#x6570;&#x5185;&#x90E8;&#xFF1B;&#x51FD;&#x6570;&#x8F93;&#x51FA;&#x5230;&#x51FD;&#x6570;&#x5916;&#x90E8;&#x7684;&#x6240;&#x6709;&#x4FE1;&#x606F;&#x90FD;&#x901A;&#x8FC7;&#x8FD4;&#x56DE;&#x503C;&#x4F20;&#x9012;&#x5230;&#x8BE5;&#x51FD;&#x6570;&#x5916;&#x90E8;&#x3002;
        &#x7EAF;&#x51FD;&#x6570;&#x7684;&#x4F18;&#x70B9;&#xFF1A;&#x65E0;&#x72B6;&#x6001;&#xFF0C;&#x7EBF;&#x7A0B;&#x5B89;&#x5168;&#xFF1B;&#x7EAF;&#x51FD;&#x6570;&#x76F8;&#x4E92;&#x8C03;&#x7528;&#x7EC4;&#x88C5;&#x8D77;&#x6765;&#x7684;&#x51FD;&#x6570;&#xFF0C;&#x8FD8;&#x662F;&#x7EAF;&#x51FD;&#x6570;&#xFF1B;&#x5E94;&#x7528;&#x7A0B;&#x5E8F;&#x6216;&#x8005;&#x8FD0;&#x884C;&#x73AF;&#x5883;&#x53EF;&#x4EE5;&#x5BF9;&#x7EAF;&#x51FD;&#x6570;&#x7684;&#x8FD0;&#x7B97;&#x7ED3;&#x679C;&#x8FDB;&#x884C;&#x7F13;&#x5B58;&#xFF0C;&#x8FD0;&#x7B97;&#x52A0;&#x5FEB;&#x901F;&#x5EA6;&#x3002;
        &#x51FD;&#x6570;&#x526F;&#x4F5C;&#x7528;&#x662F;&#x6307;&#x5F53;&#x8C03;&#x7528;&#x51FD;&#x6570;&#x65F6;&#xFF0C;&#x9664;&#x4E86;&#x8FD4;&#x56DE;&#x51FD;&#x6570;&#x503C;&#x4E4B;&#x5916;&#xFF0C;&#x8FD8;&#x5BF9;&#x4E3B;&#x8C03;&#x7528;&#x51FD;&#x6570;&#x4EA7;&#x751F;&#x9644;&#x52A0;&#x7684;&#x5F71;&#x54CD;&#x3002;&#x6BD4;&#x5982;&#x8C03;&#x63A5;&#x53E3;&#x3001;&#x4FEE;&#x6539;&#x5168;&#x5C40;&#x53D8;&#x91CF;&#x3001;&#x629B;&#x51FA;&#x4E00;&#x4E2A;&#x5F02;&#x5E38;&#x6216;&#x4EE5;&#x4E00;&#x4E2A;&#x9519;&#x8BEF;&#x7EC8;&#x6B62;&#x3001;&#x6253;&#x5370;&#x5230;&#x7EC8;&#x7AEF;&#x6216;&#x8BFB;&#x53D6;&#x7528;&#x6237;&#x8F93;&#x5165;&#x3001;&#x8BFB;&#x53D6;&#x6216;&#x5199;&#x5165;&#x4E00;&#x4E2A;&#x6587;&#x4EF6;&#x7B49;&#xFF0C;&#x6240;&#x4EE5;&#x8BF4;&#x526F;&#x4F5C;&#x7528;&#x662F;&#x7F16;&#x7A0B;&#x4E2D;&#x6700;&#x5173;&#x952E;&#x7684;&#x90E8;&#x5206;&#xFF0C;&#x56E0;&#x4E3A;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x8DDF;&#x7528;&#x6237;&#x3001;&#x8DDF;&#x6570;&#x636E;&#x8FDB;&#x884C;&#x4EA4;&#x4E92;&#x3002;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;-react-&#x4E2D;-refs-&#x5E72;&#x561B;&#x7528;&#x7684;&#xFF1F;&#x5982;&#x4F55;&#x521B;&#x5EFA;-refs&#xFF1F;"><a name="&#x2605;&#x2605;-react-&#x4E2D;-refs-&#x5E72;&#x561B;&#x7528;&#x7684;&#xFF1F;&#x5982;&#x4F55;&#x521B;&#x5EFA;-refs&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;-react-&#x4E2D;-refs-&#x5E72;&#x561B;&#x7528;&#x7684;&#xFF1F;&#x5982;&#x4F55;&#x521B;&#x5EFA;-refs&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;-react-&#x4E2D;-refs-&#x5E72;&#x561B;&#x7528;&#x7684;&#xFF1F;&#x5982;&#x4F55;&#x521B;&#x5EFA;-refs&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;-react-&#x4E2D;-refs-&#x5E72;&#x561B;&#x7528;&#x7684;&#xFF1F;&#x5982;&#x4F55;&#x521B;&#x5EFA;-refs&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605; React &#x4E2D; refs &#x5E72;&#x561B;&#x7528;&#x7684;&#xFF1F;&#x5982;&#x4F55;&#x521B;&#x5EFA; refs&#xFF1F;</p></h3>
<p>&#x89C1;&#x4E0A;</p>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x5728;&#x6784;&#x9020;&#x51FD;&#x6570;&#x8C03;&#x7528;-super-&#x5E76;&#x5C06;-props-&#x4F5C;&#x4E3A;&#x53C2;&#x6570;&#x4F20;&#x5165;&#x7684;&#x4F5C;&#x7528;&#x662F;&#x5565;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-&#x5728;&#x6784;&#x9020;&#x51FD;&#x6570;&#x8C03;&#x7528;-super-&#x5E76;&#x5C06;-props-&#x4F5C;&#x4E3A;&#x53C2;&#x6570;&#x4F20;&#x5165;&#x7684;&#x4F5C;&#x7528;&#x662F;&#x5565;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x5728;&#x6784;&#x9020;&#x51FD;&#x6570;&#x8C03;&#x7528;-super-&#x5E76;&#x5C06;-props-&#x4F5C;&#x4E3A;&#x53C2;&#x6570;&#x4F20;&#x5165;&#x7684;&#x4F5C;&#x7528;&#x662F;&#x5565;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x5728;&#x6784;&#x9020;&#x51FD;&#x6570;&#x8C03;&#x7528;-super-&#x5E76;&#x5C06;-props-&#x4F5C;&#x4E3A;&#x53C2;&#x6570;&#x4F20;&#x5165;&#x7684;&#x4F5C;&#x7528;&#x662F;&#x5565;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x5728;&#x6784;&#x9020;&#x51FD;&#x6570;&#x8C03;&#x7528;-super-&#x5E76;&#x5C06;-props-&#x4F5C;&#x4E3A;&#x53C2;&#x6570;&#x4F20;&#x5165;&#x7684;&#x4F5C;&#x7528;&#x662F;&#x5565;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x5728;&#x6784;&#x9020;&#x51FD;&#x6570;&#x8C03;&#x7528; `super` &#x5E76;&#x5C06; `props` &#x4F5C;&#x4E3A;&#x53C2;&#x6570;&#x4F20;&#x5165;&#x7684;&#x4F5C;&#x7528;&#x662F;&#x5565;&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
        ES6 &#x4E2D;&#x5728;&#x8C03;&#x7528; super()&#x65B9;&#x6CD5;&#x4E4B;&#x524D;&#xFF0C;&#x5B50;&#x7C7B;&#x6784;&#x9020;&#x51FD;&#x6570;&#x65E0;&#x6CD5;&#x4F7F;&#x7528;this&#x5F15;&#x7528;&#xFF0C;&#x5728;react&#x7684;&#x7C7B;&#x7EC4;&#x4EF6;&#x4E2D;&#x4E5F;&#x662F;&#x5982;&#x6B64;&#xFF1B;&#x5C06; props &#x53C2;&#x6570;&#x4F20;&#x9012;&#x7ED9; super() &#x8C03;&#x7528;&#x7684;&#x4E3B;&#x8981;&#x539F;&#x56E0;&#x662F;&#x5728;&#x5B50;&#x6784;&#x9020;&#x51FD;&#x6570;&#x4E2D;&#x80FD;&#x591F;&#x901A;&#x8FC7;this.props&#x6765;&#x83B7;&#x53D6;&#x4F20;&#x5165;&#x7684; props&#x3002;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;-reactcreateelement-&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;-reactcreateelement-&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;-reactcreateelement-&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;-reactcreateelement-&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;-reactcreateelement-&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x5982;&#x4F55; React.createElement &#xFF1F;</p></h3>
<p>&#x89C1;&#x4E0A;</p>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x8BB2;&#x8BB2;&#x4EC0;&#x4E48;&#x662F;-jsx-&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-&#x8BB2;&#x8BB2;&#x4EC0;&#x4E48;&#x662F;-jsx-&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x8BB2;&#x8BB2;&#x4EC0;&#x4E48;&#x662F;-jsx-&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x8BB2;&#x8BB2;&#x4EC0;&#x4E48;&#x662F;-jsx-&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x8BB2;&#x8BB2;&#x4EC0;&#x4E48;&#x662F;-jsx-&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x8BB2;&#x8BB2;&#x4EC0;&#x4E48;&#x662F; JSX &#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
        JSX&#x5168;&#x79F0;&#x4E3A;JavaScript XML&#xFF0C;&#x662F;react&#x4E2D;&#x7684;&#x4E00;&#x79CD;&#x8BED;&#x6CD5;&#x7CD6;&#xFF0C;&#x53EF;&#x4EE5;&#x8BA9;&#x6211;&#x4EEC;&#x5728;js&#x4EE3;&#x7801;&#x4E2D;&#x8131;&#x79BB;&#x5B57;&#x7B26;&#x4E32;&#x76F4;&#x63A5;&#x7F16;&#x5199;html&#x4EE3;&#x7801;&#xFF1B;&#x672C;&#x8EAB;&#x4E0D;&#x80FD;&#x88AB;&#x6D4F;&#x89C8;&#x5668;&#x8BFB;&#x53D6;&#xFF0C;&#x5FC5;&#x987B;&#x4F7F;&#x7528;@babel/preset-react&#x548C;webpack&#x7B49;&#x5DE5;&#x5177;&#x5C06;&#x5176;&#x8F6C;&#x6362;&#x4E3A;&#x4F20;&#x7EDF;&#x7684;JS&#x3002;
        &#x4E3B;&#x8981;&#x6709;&#x4EE5;&#x4E0B;&#x7279;&#x70B9;&#xFF1A;
        &#xFF08;1&#xFF09;&#x7C7B;XML&#x8BED;&#x6CD5;&#x5BB9;&#x6613;&#x63A5;&#x53D7;&#xFF0C;&#x7ED3;&#x6784;&#x6E05;&#x6670;&#xFF1B;
    &#xFF08;2&#xFF09;&#x589E;&#x5F3A;JS&#x8BED;&#x4E49;&#xFF1B;
    &#xFF08;3&#xFF09;&#x62BD;&#x8C61;&#x7A0B;&#x5EA6;&#x9AD8;&#xFF0C;&#x5C4F;&#x853D;DOM&#x64CD;&#x4F5C;&#xFF0C;&#x8DE8;&#x5E73;&#x53F0;&#xFF1B;
    &#xFF08;4&#xFF09;&#x4EE3;&#x7801;&#x6A21;&#x5757;&#x5316;&#xFF1B;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x4E0D;&#x76F4;&#x63A5;&#x66F4;&#x65B0;-state-&#x5462;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x4E0D;&#x76F4;&#x63A5;&#x66F4;&#x65B0;-state-&#x5462;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x4E0D;&#x76F4;&#x63A5;&#x66F4;&#x65B0;-state-&#x5462;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x4E0D;&#x76F4;&#x63A5;&#x66F4;&#x65B0;-state-&#x5462;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x4E0D;&#x76F4;&#x63A5;&#x66F4;&#x65B0;-state-&#x5462;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x4E3A;&#x4EC0;&#x4E48;&#x4E0D;&#x76F4;&#x63A5;&#x66F4;&#x65B0; `state` &#x5462;&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">// &#x5982;&#x679C;&#x8BD5;&#x56FE;&#x76F4;&#x63A5;&#x66F4;&#x65B0; state &#xFF0C;&#x5219;&#x4E0D;&#x4F1A;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x7EC4;&#x4EF6;&#xFF1B;&#x9700;&#x8981;&#x4F7F;&#x7528;setState()&#x65B9;&#x6CD5;&#x6765;&#x66F4;&#x65B0; state&#x8FD9;&#x6837;&#x7EC4;&#x4EF6;&#x624D;&#x4F1A;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#xFF1B;</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-react-&#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x6709;&#x54EA;&#x4E9B;&#x4E0D;&#x540C;&#x9636;&#x6BB5;&#xFF1F;react-&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x65B9;&#x6CD5;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-react-&#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x6709;&#x54EA;&#x4E9B;&#x4E0D;&#x540C;&#x9636;&#x6BB5;&#xFF1F;react-&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x65B9;&#x6CD5;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-react-&#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x6709;&#x54EA;&#x4E9B;&#x4E0D;&#x540C;&#x9636;&#x6BB5;&#xFF1F;react-&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x65B9;&#x6CD5;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-react-&#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x6709;&#x54EA;&#x4E9B;&#x4E0D;&#x540C;&#x9636;&#x6BB5;&#xFF1F;react-&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x65B9;&#x6CD5;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-react-&#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x6709;&#x54EA;&#x4E9B;&#x4E0D;&#x540C;&#x9636;&#x6BB5;&#xFF1F;react-&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x65B9;&#x6CD5;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; React &#x7EC4;&#x4EF6;&#x751F;&#x547D;&#x5468;&#x671F;&#x6709;&#x54EA;&#x4E9B;&#x4E0D;&#x540C;&#x9636;&#x6BB5;&#xFF1F;React &#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x65B9;&#x6CD5;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;</p></h3>
<p>&#x89C1;&#x4E0A;</p>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x8FD9;&#x4E09;&#x4E2A;&#x70B9;&#x5728;-react-&#x5E72;&#x561B;&#x7528;&#x7684;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-&#x8FD9;&#x4E09;&#x4E2A;&#x70B9;&#x5728;-react-&#x5E72;&#x561B;&#x7528;&#x7684;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x8FD9;&#x4E09;&#x4E2A;&#x70B9;&#x5728;-react-&#x5E72;&#x561B;&#x7528;&#x7684;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x8FD9;&#x4E09;&#x4E2A;&#x70B9;&#x5728;-react-&#x5E72;&#x561B;&#x7528;&#x7684;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x8FD9;&#x4E09;&#x4E2A;&#x70B9;&#x5728;-react-&#x5E72;&#x561B;&#x7528;&#x7684;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x8FD9;&#x4E09;&#x4E2A;&#x70B9;(...)&#x5728; React &#x5E72;&#x561B;&#x7528;&#x7684;&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">// ...&#x662F;es6&#x8BED;&#x6CD5;&#x65B0;&#x51FA;&#x7684;&#x89C4;&#x8303;&#xFF0C;&#x53EB;&#x505A;&#x5C55;&#x5F00;&#x8FD0;&#x7B97;&#x7B26;&#xFF1B;&#x5728;react&#x4E2D;&#x53EF;&#x4EE5;&#x5C06;&#x5BF9;&#x8C61;&#x6216;&#x6570;&#x7EC4;&#x8FDB;&#x884C;&#x5C55;&#x5F00;&#xFF0C;&#x8BA9;&#x6211;&#x4EEC;&#x64CD;&#x4F5C;&#x6539;&#x53D8;&#x6570;&#x636E;&#x7ED3;&#x6784;&#x975E;&#x5E38;&#x65B9;&#x4FBF;&#x3002;</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-react-&#x4E2D;&#x7684;-usestate-&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-react-&#x4E2D;&#x7684;-usestate-&#x662F;&#x4EC0;&#x4E48;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-react-&#x4E2D;&#x7684;-usestate-&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-react-&#x4E2D;&#x7684;-usestate-&#x662F;&#x4EC0;&#x4E48;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-react-&#x4E2D;&#x7684;-usestate-&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; React &#x4E2D;&#x7684; `useState()` &#x662F;&#x4EC0;&#x4E48;&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">// useState&#x662F;&#x4E00;&#x4E2A;&#x5185;&#x7F6E;&#x7684;React Hook&#xFF0C;&#x53EF;&#x4EE5;&#x8BA9;&#x6211;&#x4EEC;&#x5728;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x4E2D;&#x50CF;&#x7C7B;&#x7EC4;&#x4EF6;&#x4E00;&#x6837;&#x4F7F;&#x7528;state&#x5E76;&#x4E14;&#x6539;&#x53D8;state&#x7684;&#x503C;&#x3002;</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-react-&#x4E2D;&#x7684;strictmode&#x4E25;&#x683C;&#x6A21;&#x5F0F;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-react-&#x4E2D;&#x7684;strictmode&#x4E25;&#x683C;&#x6A21;&#x5F0F;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-react-&#x4E2D;&#x7684;strictmode&#x4E25;&#x683C;&#x6A21;&#x5F0F;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-react-&#x4E2D;&#x7684;strictmode&#x4E25;&#x683C;&#x6A21;&#x5F0F;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-react-&#x4E2D;&#x7684;strictmode&#x4E25;&#x683C;&#x6A21;&#x5F0F;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; React &#x4E2D;&#x7684;StrictMode(&#x4E25;&#x683C;&#x6A21;&#x5F0F;)&#x662F;&#x4EC0;&#x4E48;&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
    React&#x7684;StrictMode&#x662F;&#x4E00;&#x79CD;&#x8F85;&#x52A9;&#x7EC4;&#x4EF6;&#xFF0C;&#x7528;&lt;StrictMode /&gt;&#x5305;&#x88C5;&#x7EC4;&#x4EF6;&#xFF0C;&#x53EF;&#x4EE5;&#x5E2E;&#x52A9;&#x6211;&#x4EEC;&#x7F16;&#x5199;&#x66F4;&#x597D;&#x7684;react&#x7EC4;&#x4EF6;&#xFF0C;&#x4E0D;&#x4F1A;&#x6E32;&#x67D3;&#x51FA;&#x4EFB;&#x4F55;&#x53EF;&#x89C1;&#x7684;ui&#xFF1B;&#x4EC5;&#x5728;&#x5F00;&#x53D1;&#x6A21;&#x5F0F;&#x4E0B;&#x8FD0;&#x884C;&#xFF0C;&#x5B83;&#x4EEC;&#x4E0D;&#x4F1A;&#x5F71;&#x54CD;&#x751F;&#x4EA7;&#x6784;&#x5EFA;&#xFF0C;&#x53EF;&#x4EE5;&#x505A;&#x4EE5;&#x4E0B;&#x68C0;&#x67E5;&#xFF1A;
    &#xFF08;1&#xFF09;&#x9A8C;&#x8BC1;&#x5185;&#x90E8;&#x7EC4;&#x4EF6;&#x662F;&#x5426;&#x9075;&#x5FAA;&#x67D0;&#x4E9B;&#x63A8;&#x8350;&#x505A;&#x6CD5;&#xFF0C;&#x5982;&#x679C;&#x6CA1;&#x6709;&#xFF0C;&#x4F1A;&#x5728;&#x63A7;&#x5236;&#x53F0;&#x7ED9;&#x51FA;&#x8B66;&#x544A;&#xFF1B;
    &#xFF08;2&#xFF09;&#x9A8C;&#x8BC1;&#x662F;&#x5426;&#x4F7F;&#x7528;&#x7684;&#x5DF2;&#x7ECF;&#x5E9F;&#x5F03;&#x7684;&#x65B9;&#x6CD5;&#xFF0C;&#x5982;&#x679C;&#x6709;&#xFF0C;&#x4F1A;&#x5728;&#x63A7;&#x5236;&#x53F0;&#x7ED9;&#x51FA;&#x8B66;&#x544A;&#xFF1B;
    &#xFF08;3&#xFF09;&#x901A;&#x8FC7;&#x8BC6;&#x522B;&#x6F5C;&#x5728;&#x7684;&#x98CE;&#x9669;&#x9884;&#x9632;&#x4E00;&#x4E9B;&#x526F;&#x4F5C;&#x7528;&#x3002;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x7C7B;&#x65B9;&#x6CD5;&#x9700;&#x8981;&#x7ED1;&#x5B9A;&#x5230;&#x7C7B;&#x5B9E;&#x4F8B;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x7C7B;&#x65B9;&#x6CD5;&#x9700;&#x8981;&#x7ED1;&#x5B9A;&#x5230;&#x7C7B;&#x5B9E;&#x4F8B;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x7C7B;&#x65B9;&#x6CD5;&#x9700;&#x8981;&#x7ED1;&#x5B9A;&#x5230;&#x7C7B;&#x5B9E;&#x4F8B;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x7C7B;&#x65B9;&#x6CD5;&#x9700;&#x8981;&#x7ED1;&#x5B9A;&#x5230;&#x7C7B;&#x5B9E;&#x4F8B;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x7C7B;&#x65B9;&#x6CD5;&#x9700;&#x8981;&#x7ED1;&#x5B9A;&#x5230;&#x7C7B;&#x5B9E;&#x4F8B;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x4E3A;&#x4EC0;&#x4E48;&#x7C7B;&#x65B9;&#x6CD5;&#x9700;&#x8981;&#x7ED1;&#x5B9A;&#x5230;&#x7C7B;&#x5B9E;&#x4F8B;&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">// &#x5728; JS &#x4E2D;&#xFF0C;this &#x503C;&#x4F1A;&#x6839;&#x636E;&#x5F53;&#x524D;&#x4E0A;&#x4E0B;&#x6587;&#x53D8;&#x5316;&#x3002;&#x5728; React &#x7C7B;&#x7EC4;&#x4EF6;&#x65B9;&#x6CD5;&#x4E2D;&#xFF0C;&#x5F00;&#x53D1;&#x4EBA;&#x5458;&#x901A;&#x5E38;&#x5E0C;&#x671B; this &#x5F15;&#x7528;&#x7EC4;&#x4EF6;&#x7684;&#x5F53;&#x524D;&#x5B9E;&#x4F8B;&#xFF0C;&#x56E0;&#x6B64;&#x6709;&#x5FC5;&#x8981;&#x5C06;&#x8FD9;&#x4E9B;&#x65B9;&#x6CD5;&#x7ED1;&#x5B9A;&#x5230;&#x5B9E;&#x4F8B;&#x3002;&#x901A;&#x5E38;&#x8FD9;&#x662F;&#x5728;&#x6784;&#x9020;&#x51FD;&#x6570;&#x4E2D;&#x5B8C;&#x6210;&#x7684;:</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-prop-drilling&#xFF0C;&#x5982;&#x4F55;&#x907F;&#x514D;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-prop-drilling&#xFF0C;&#x5982;&#x4F55;&#x907F;&#x514D;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-prop-drilling&#xFF0C;&#x5982;&#x4F55;&#x907F;&#x514D;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-prop-drilling&#xFF0C;&#x5982;&#x4F55;&#x907F;&#x514D;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-prop-drilling&#xFF0C;&#x5982;&#x4F55;&#x907F;&#x514D;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; &#x4EC0;&#x4E48;&#x662F; prop drilling&#xFF0C;&#x5982;&#x4F55;&#x907F;&#x514D;&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
        &#x4ECE;&#x4E00;&#x4E2A;&#x5916;&#x90E8;&#x7EC4;&#x4EF6;&#x4E00;&#x5C42;&#x5C42;&#x5C06;prop&#x4F20;&#x9012;&#x5230;&#x5185;&#x90E8;&#x7EC4;&#x4EF6;&#x5F88;&#x4E0D;&#x65B9;&#x4FBF;&#xFF0C;&#x8FD9;&#x4E2A;&#x95EE;&#x9898;&#x5C31;&#x53EB;&#x505A; prop drilling&#xFF1B;&#x4E3B;&#x8981;&#x7F3A;&#x70B9;&#x662F;&#x539F;&#x672C;&#x4E0D;&#x9700;&#x8981;&#x6570;&#x636E;&#x7684;&#x7EC4;&#x4EF6;&#x53D8;&#x5F97;&#x4E0D;&#x5FC5;&#x8981;&#x5730;&#x590D;&#x6742;&#xFF0C;&#x5E76;&#x4E14;&#x96BE;&#x4EE5;&#x7EF4;&#x62A4;&#xFF0C;&#x4EE3;&#x7801;&#x770B;&#x8D77;&#x6765;&#x4E5F;&#x53D8;&#x5F97;&#x5197;&#x4F59;&#xFF0C;&#x4E0D;&#x4F18;&#x96C5;&#xFF1B;
        &#x4E3A;&#x4E86;&#x907F;&#x514D;prop drilling&#xFF0C;&#x4E00;&#x79CD;&#x5E38;&#x7528;&#x7684;&#x65B9;&#x6CD5;&#x662F;&#x4F7F;&#x7528;React Context&#x3002;&#x901A;&#x8FC7;&#x5B9A;&#x4E49;&#x63D0;&#x4F9B;&#x6570;&#x636E;&#x7684;Provider&#x7EC4;&#x4EF6;&#xFF0C;&#x5E76;&#x5141;&#x8BB8;&#x5D4C;&#x5957;&#x7684;&#x7EC4;&#x4EF6;&#x901A;&#x8FC7; Consumer&#x7EC4;&#x4EF6;&#x6216; useContext Hook &#x4F7F;&#x7528;&#x4E0A;&#x4E0B;&#x6587;&#x6570;&#x636E;&#x3002;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;-&#x63CF;&#x8FF0;-flux-&#x4E0E;-mvc&#xFF1F;"><a name="&#x2605;&#x2605;-&#x63CF;&#x8FF0;-flux-&#x4E0E;-mvc&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;-&#x63CF;&#x8FF0;-flux-&#x4E0E;-mvc&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;-&#x63CF;&#x8FF0;-flux-&#x4E0E;-mvc&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;-&#x63CF;&#x8FF0;-flux-&#x4E0E;-mvc&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605; &#x63CF;&#x8FF0; Flux &#x4E0E; MVC&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-comment">/*
        &#x4F20;&#x7EDF;&#x7684; MVC &#x6A21;&#x5F0F;&#x5728;&#x5206;&#x79BB;&#x6570;&#x636E;(Model)&#x3001;UI(View&#x548C;&#x903B;&#x8F91;(Controller)&#x65B9;&#x9762;&#x5DE5;&#x4F5C;&#x5F97;&#x5F88;&#x597D;&#xFF0C;&#x4F46;&#x662F; MVC &#x67B6;&#x6784;&#x7ECF;&#x5E38;&#x9047;&#x5230;&#x4E24;&#x4E2A;&#x4E3B;&#x8981;&#x95EE;&#x9898;:
        &#x6570;&#x636E;&#x6D41;&#x4E0D;&#x591F;&#x6E05;&#x6670;&#x2014;&#x2014;&#x8DE8;&#x89C6;&#x56FE;&#x53D1;&#x751F;&#x7684;&#x7EA7;&#x8054;&#x66F4;&#x65B0;&#x5E38;&#x5E38;&#x4F1A;&#x5BFC;&#x81F4;&#x6DF7;&#x4E71;&#x7684;&#x4E8B;&#x4EF6;&#x7F51;&#x7EDC;&#xFF0C;&#x96BE;&#x4E8E;&#x8C03;&#x8BD5;&#x3002;
        &#x7F3A;&#x4E4F;&#x6570;&#x636E;&#x5B8C;&#x6574;&#x6027;&#x2014;&#x2014;&#x6A21;&#x578B;&#x6570;&#x636E;&#x53EF;&#x4EE5;&#x5728;&#x4EFB;&#x4F55;&#x5730;&#x65B9;&#x53D1;&#x751F;&#x7A81;&#x53D8;&#xFF0C;&#x4ECE;&#x800C;&#x5728;&#x6574;&#x4E2A;UI&#x4E2D;&#x4EA7;&#x751F;&#x4E0D;&#x53EF;&#x9884;&#x6D4B;&#x7684;&#x7ED3;&#x679C;&#x3002;

        &#x4F7F;&#x7528; Flux &#x6A21;&#x5F0F;&#x7684;&#x590D;&#x6742;&#x7528;&#x6237;&#x754C;&#x9762;&#x4E0D;&#x518D;&#x906D;&#x53D7;&#x7EA7;&#x8054;&#x66F4;&#x65B0;&#xFF0C;&#x4EFB;&#x4F55;&#x7ED9;&#x5B9A;&#x7684;React &#x7EC4;&#x4EF6;&#x90FD;&#x80FD;&#x591F;&#x6839;&#x636E; store &#x63D0;&#x4F9B;&#x7684;&#x6570;&#x636E;&#x91CD;&#x5EFA;&#x5176;&#x72B6;&#x6001;&#x3002;Flux &#x6A21;&#x5F0F;&#x8FD8;&#x901A;&#x8FC7;&#x9650;&#x5236;&#x5BF9;&#x5171;&#x4EAB;&#x6570;&#x636E;&#x7684;&#x76F4;&#x63A5;&#x8BBF;&#x95EE;&#x6765;&#x52A0;&#x5F3A;&#x6570;&#x636E;&#x5B8C;&#x6574;&#x6027;&#x3002;
*/</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x8FD9;&#x6BB5;&#x4EE3;&#x7801;&#x6709;&#x4EC0;&#x4E48;&#x95EE;&#x9898;&#x5417;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-&#x8FD9;&#x6BB5;&#x4EE3;&#x7801;&#x6709;&#x4EC0;&#x4E48;&#x95EE;&#x9898;&#x5417;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x8FD9;&#x6BB5;&#x4EE3;&#x7801;&#x6709;&#x4EC0;&#x4E48;&#x95EE;&#x9898;&#x5417;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x8FD9;&#x6BB5;&#x4EE3;&#x7801;&#x6709;&#x4EC0;&#x4E48;&#x95EE;&#x9898;&#x5417;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x8FD9;&#x6BB5;&#x4EE3;&#x7801;&#x6709;&#x4EC0;&#x4E48;&#x95EE;&#x9898;&#x5417;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x8FD9;&#x6BB5;&#x4EE3;&#x7801;&#x6709;&#x4EC0;&#x4E48;&#x95EE;&#x9898;&#x5417;&#xFF1F;</p></h3>
<pre><code class="lang-js"><span class="hljs-keyword">this</span>.setState((prevState, props) =&gt; {
  <span class="hljs-keyword">return</span> {
    streak: prevState.streak + props.count
  }
})
<span class="hljs-comment">// &#x6CA1;&#x6709;&#x95EE;&#x9898;</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-react-context"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-react-context" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-react-context"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-react-context" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-react-context"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; &#x4EC0;&#x4E48;&#x662F; React Context?</p></h3>
<p><a href="https://zh-hans.reactjs.org/docs/context.html#gatsby-focus-wrapper" target="_blank">React Context</a><br><strong><em><a href="https://react.jokcy.me/book/features/context.html" target="_blank">&#x6E90;&#x7801;&#x89E3;&#x6790;</a></em></strong></p>
<h5 id="what"><a name="what" class="anchor-navigation-ex-anchor" href="#what"><i class="fa fa-link" aria-hidden="true"></i></a><a name="what" class="plugin-anchor" href="#what"><i class="fa fa-link" aria-hidden="true"></i></a>What</h5>
<blockquote>
<p><strong>Context</strong>&#x63D0;&#x4F9B;&#x4E86;&#x4E00;&#x4E2A;&#x65E0;&#x9700;&#x4E3A;&#x6BCF;&#x5C42;&#x7EC4;&#x4EF6;&#x624B;&#x52A8;&#x6DFB;&#x52A0;<em>props</em>&#xFF0C;&#x5C31;&#x80FD;&#x5728;<strong>&#x7EC4;&#x4EF6;&#x6811;</strong>&#x95F4;&#x8FDB;&#x884C;&#x6570;&#x636E;&#x4F20;&#x9012;&#x7684;&#x529F;&#x80FD;</p>
</blockquote>
<h5 id="why"><a name="why" class="anchor-navigation-ex-anchor" href="#why"><i class="fa fa-link" aria-hidden="true"></i></a><a name="why" class="plugin-anchor" href="#why"><i class="fa fa-link" aria-hidden="true"></i></a>Why</h5>
<blockquote>
<p>&#x67D0;&#x4E9B;&#x5168;&#x5C40;&#x5C5E;&#x6027;&#xFF0C;&#x901A;&#x8FC7;&#x7236;&#x5B50;props&#x4F20;&#x9012;&#x592A;&#x8FC7;&#x7E41;&#x7410;&#xFF0C;Context&#x63D0;&#x4F9B;&#x4E86;&#x4E00;&#x79CD;&#x7EC4;&#x4EF6;&#x4E4B;&#x95F4;&#x5171;&#x4EAB;&#x6B64;&#x7C7B;&#x503C;&#x7684;&#x65B9;&#x5F0F;&#xFF0C;&#x800C;&#x4E0D;&#x5FC5;&#x663E;&#x5F0F;&#x7684;&#x901A;&#x8FC7;&#x7EC4;&#x4EF6;&#x6811;&#x9010;&#x5C42;&#x4F20;&#x9012;props</p>
</blockquote>
<h5 id="when"><a name="when" class="anchor-navigation-ex-anchor" href="#when"><i class="fa fa-link" aria-hidden="true"></i></a><a name="when" class="plugin-anchor" href="#when"><i class="fa fa-link" aria-hidden="true"></i></a>When</h5>
<blockquote>
<p>&#x5171;&#x4EAB;&#x90A3;&#x4E9B;&#x5BF9;&#x4E8E;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#x6811;&#x800C;&#x8A00;&#x662F;<strong>&#x5168;&#x5C40;</strong>&#x7684;&#x6570;&#x636E;&#xFF0C;&#x4F8B;&#x5982;&#x5F53;&#x524D;&#x8BA4;&#x8BC1;&#x7684;&#x7528;&#x6237;&#x3001;&#x4E3B;&#x9898;&#x6216;&#x8005;&#x9996;&#x9009;&#x8BED;&#x8A00;&#x7B49;</p>
</blockquote>
<h5 id="where"><a name="where" class="anchor-navigation-ex-anchor" href="#where"><i class="fa fa-link" aria-hidden="true"></i></a><a name="where" class="plugin-anchor" href="#where"><i class="fa fa-link" aria-hidden="true"></i></a>Where</h5>
<blockquote>
<ul>
<li>Context&#x5E94;&#x7528;&#x573A;&#x666F;&#x5728;&#x4E8E;&#x5F88;&#x591A;&#x4E0D;&#x540C;&#x5C42;&#x7EA7;&#x7684;&#x7EC4;&#x4EF6;&#x8BBF;&#x95EE;&#x540C;&#x6837;&#x7684;&#x6570;&#x636E;&#xFF0C;&#x8FD9;&#x6837;&#x4E5F;&#x4F7F;&#x5F97;&#x7EC4;&#x4EF6;&#x7684;&#x590D;&#x7528;&#x6027;&#x53D8;&#x5DEE;&#x3002;</li>
<li><strong>&#x5982;&#x679C;&#x4F60;&#x53EA;&#x662F;&#x60F3;&#x907F;&#x514D;&#x5C42;&#x5C42;&#x4F20;&#x9012;&#x4E00;&#x4E9B;&#x5C5E;&#x6027;&#xFF0C;&#x7EC4;&#x4EF6;&#x7EC4;&#x5408;&#x6709;&#x65F6;&#x5019;&#x662F;&#x4E00;&#x4E2A;&#x6BD4;Context&#x66F4;&#x597D;&#x7684;&#x65B9;&#x6848;</strong>&#xFF0C;&#x4E5F;&#x5C31;&#x662F;&#x76F4;&#x63A5;&#x4F20;&#x9012;&#x7EC4;&#x4EF6;</li>
<li>&#x6240;&#x4EE5;&#x4E00;&#x4E2A;&#x6280;&#x672F;&#x65B9;&#x6848;&#x7684;&#x9009;&#x5B9A;&#x9700;&#x8981;&#x9488;&#x5BF9;&#x4E0D;&#x540C;&#x7684;&#x573A;&#x666F;&#x5177;&#x4F53;&#x5206;&#x6790;&#xFF0C;&#x91C7;&#x53D6;&#x5408;&#x9002;&#x7684;&#x65B9;&#x6848;</li>
</ul>
</blockquote>
<h5 id="how"><a name="how" class="anchor-navigation-ex-anchor" href="#how"><i class="fa fa-link" aria-hidden="true"></i></a><a name="how" class="plugin-anchor" href="#how"><i class="fa fa-link" aria-hidden="true"></i></a>How</h5>
<pre><code class="lang-js"><span class="hljs-comment">// &#x2460;&#x521B;&#x5EFA;</span>
<span class="hljs-keyword">const</span> ThemeContext = React.createContext(<span class="hljs-string">&apos;xxx&apos;</span>)

<span class="hljs-comment">// &#x2461;&#x6CE8;&#x5165;---&#x63D0;&#x4F9B;&#x8005; &#x5728;&#x5165;&#x53E3;&#x6216;&#x8005;&#x4F60;&#x60F3;&#x8981;&#x6CE8;&#x5165;&#x7684;&#x7236;&#x7C7B;&#x4E2D;&#xFF0C;&#x4E14;&#x53EF;&#x4EE5;&#x5D4C;&#x5957;&#xFF0C;&#x91CC;&#x5C42;&#x8986;&#x76D6;&#x5916;&#x5C42;</span>
<span class="hljs-keyword">return</span> (
  &lt;ThemeContext.Provider value=&quot;yyy&quot;&gt;
  {children}
  &lt;ThemeContext.Provider&gt;
)

// &#x2462;&#x4F7F;&#x7528;---&#x6D88;&#x8D39;&#x8005; &#x9700;&#x8981;&#x4F7F;&#x7528;&#x5171;&#x4EAB;&#x6570;&#x636E;&#x7684;&#x5B50;&#x7C7B;&#x4E2D;
// &#x65B9;&#x5F0F;&#x4E00;
static contextType = ThemeContext
// &#x65B9;&#x5F0F;&#x4E8C;
Class.contextType = ThemeContext 
render() {
  let value = this.context
  /* &#x57FA;&#x4E8E;&#x8FD9;&#x4E2A;&#x503C;&#x8FDB;&#x884C;&#x6E32;&#x67D3;&#x5DE5;&#x4F5C; */
}
// &#x65B9;&#x5F0F;&#x4E09;
return(
  &lt;ThemeContext.Consumer&gt;
  { value =&gt; /* &#x57FA;&#x4E8E; context &#x503C;&#x8FDB;&#x884C;&#x6E32;&#x67D3;*/ }
  &lt;/ThemeContext.Consumer&gt;
)
</code></pre>
<h5 id="more"><a name="more" class="anchor-navigation-ex-anchor" href="#more"><i class="fa fa-link" aria-hidden="true"></i></a><a name="more" class="plugin-anchor" href="#more"><i class="fa fa-link" aria-hidden="true"></i></a>More</h5>
<p><strong><em>&#x52A8;&#x6001;Context</em></strong>---&#x7C7B;&#x4F3C;&#x7236;&#x5B50;&#x7EC4;&#x4EF6;</p>
<pre><code class="lang-js"><span class="hljs-comment">// &#x2460;&#x521B;&#x5EFA;</span>
<span class="hljs-keyword">const</span> ThemeContext = React.createContext({
  value: <span class="hljs-string">&apos;xxx&apos;</span>,
  changeFunc: () =&gt; {} <span class="hljs-comment">//&#x901A;&#x8FC7;context&#x4F20;&#x9012;&#x8FD9;&#x4E2A;&#x51FD;&#x6570;&#xFF0C;&#x8BA9;consumers&#x7EC4;&#x4EF6;&#x66F4;&#x65B0;context</span>
})
<span class="hljs-comment">// &#x2461;&#x6CE8;&#x5165;</span>
<span class="hljs-keyword">return</span> (
  &lt;ThemeContext.Provider value=&quot;yyy&quot;&gt;
    &lt;Child changeFunc={this.changeFunc}&gt; 
  &lt;ThemeContext.Provider&gt;
)
// &#x2462;&#x6D88;&#x8D39;
return(
  &lt;ThemeContext.Consumer&gt;
  { ({value, changeFunc}) =&gt; /* &#x57FA;&#x4E8E; context &#x503C;&#x8FDB;&#x884C;&#x6E32;&#x67D3;,&#x540C;&#x65F6;&#x628A;changeFunc&#x7ED1;&#x5B9A;*/ }
  &lt;/ThemeContext.Consumer&gt;
)
</code></pre>
<p><strong><em>&#x6D88;&#x8D39;&#x591A;&#x4E2A;Context&#x3001;&#x6CE8;&#x610F;&#x4E8B;&#x9879;&#x7B49;</em></strong><a href="https://zh-hans.reactjs.org/docs/context.html#consuming-multiple-contexts" target="_blank">&#x53C2;&#x8003;React&#x4E2D;&#x6587;&#x7F51;</a></p>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-react-fiber"><a name="&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-react-fiber" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-react-fiber"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-react-fiber" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-react-fiber"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605;&#x2605; &#x4EC0;&#x4E48;&#x662F; React Fiber?</p></h3>
<h5 id="what_1"><a name="what_1" class="anchor-navigation-ex-anchor" href="#what_1"><i class="fa fa-link" aria-hidden="true"></i></a><a name="what" class="plugin-anchor" href="#what"><i class="fa fa-link" aria-hidden="true"></i></a>What</h5>
<p><a href="https://github.com/acdlite/react-fiber-architecture" target="_blank">React Fiber En</a></p>
<blockquote>
<ul>
<li>Fiber&#x662F;React16&#x4E2D;&#x65B0;&#x7684;&#x534F;&#x8C03;&#x5F15;&#x64CE;&#xFF0C;&#x5B83;&#x7684;&#x4E3B;&#x8981;&#x76EE;&#x7684;&#x662F;&#x4F7F;Virtual DOM&#x53EF;&#x4EE5;&#x8FDB;&#x884C;&#x589E;&#x91CF;&#x5F0F;&#x6E32;&#x67D3;&#xFF0C;&#x8BA9;&#x754C;&#x9762;&#x6E32;&#x67D3;&#x66F4;&#x6D41;&#x7545;</li>
<li>&#x4E00;&#x79CD;&#x6D41;&#x7A0B;&#x63A7;&#x5236;&#x539F;&#x8BED;&#xFF0C;&#x4E5F;&#x79F0;&#x4E3A;&#x534F;&#x7A0B;&#xFF0C;&#x53EF;&#x4EE5;&#x7C7B;&#x6BD4;es6&#x4E2D;&#x7684;generator&#x51FD;&#x6570;&#xFF1B;React&#x6E32;&#x67D3;&#x7684;&#x8FC7;&#x7A0B;&#x53EF;&#x4EE5;&#x88AB;&#x4E2D;&#x65AD;&#xFF0C;&#x53EF;&#x4EE5;&#x5C06;&#x63A7;&#x5236;&#x6743;&#x4EA4;&#x56DE;&#x6D4F;&#x89C8;&#x5668;&#xFF0C;&#x8BA9;&#x4F4D;&#x7ED9;&#x9AD8;&#x4F18;&#x5148;&#x7EA7;&#x7684;&#x4EFB;&#x52A1;&#xFF0C;&#x6D4F;&#x89C8;&#x5668;&#x7A7A;&#x95F2;&#x540E;&#x518D;&#x6062;&#x590D;&#x6E32;&#x67D3;&#x3002;</li>
<li>&#x4E00;&#x4E2A;&#x6267;&#x884C;&#x5355;&#x5143;&#xFF0C;&#x6BCF;&#x6B21;&#x6267;&#x884C;&#x5B8C;&#x4E00;&#x4E2A;&#x201C;&#x6267;&#x884C;&#x5355;&#x5143;&#x201D;&#xFF0C;React&#x5C31;&#x4F1A;&#x68C0;&#x67E5;&#x73B0;&#x5728;&#x8FD8;&#x5269;&#x591A;&#x5C11;&#x65F6;&#x95F4;&#xFF0C;&#x5982;&#x679C;&#x6CA1;&#x6709;&#x65F6;&#x95F4;&#x5C31;&#x5C06;&#x63A7;&#x5236;&#x6743;&#x8BA9;&#x51FA;&#x53BB;&#x3002;</li>
</ul>
</blockquote>
<ul>
<li>&#x76EE;&#x6807;</li>
</ul>
<blockquote>
<ul>
<li>&#x628A;&#x53EF;&#x4E2D;&#x65AD;&#x7684;&#x5DE5;&#x4F5C;&#x62C6;&#x5206;&#x6210;&#x5C0F;&#x4EFB;&#x52A1;</li>
<li>&#x5BF9;&#x6B63;&#x5728;&#x505A;&#x7684;&#x5DE5;&#x4F5C;&#x8C03;&#x6574;&#x4F18;&#x5148;&#x6B21;&#x5E8F;&#x3001;&#x91CD;&#x505A;&#x3001;&#x590D;&#x7528;&#x4E0A;&#x6B21;&#xFF08;&#x505A;&#x4E86;&#x4E00;&#x534A;&#x7684;&#xFF09;&#x6210;&#x679C;</li>
<li>&#x5728;&#x7236;&#x5B50;&#x4EFB;&#x52A1;&#x4E4B;&#x95F4;&#x4ECE;&#x5BB9;&#x5207;&#x6362;&#xFF08;yield back and forth&#xFF09;&#xFF0C;&#x4EE5;&#x652F;&#x6301;React&#x6267;&#x884C;&#x8FC7;&#x7A0B;&#x4E2D;&#x7684;&#x5E03;&#x5C40;&#x5237;&#x65B0;</li>
<li>&#x652F;&#x6301;render()&#x8FD4;&#x56DE;&#x591A;&#x4E2A;&#x5143;&#x7D20;</li>
<li>&#x66F4;&#x597D;&#x5730;&#x652F;&#x6301;error boundary  </li>
</ul>
</blockquote>
<ul>
<li>&#x7279;&#x6027;</li>
</ul>
<blockquote>
<ul>
<li>&#x589E;&#x91CF;&#x6E32;&#x67D3;&#xFF08;&#x628A;&#x6E32;&#x67D3;&#x4EFB;&#x52A1;&#x62C6;&#x5206;&#x6210;&#x5757;&#xFF0C;&#x5300;&#x5230;&#x591A;&#x5E27;&#xFF09;</li>
<li>&#x66F4;&#x65B0;&#x65F6;&#x80FD;&#x591F;&#x6682;&#x505C;&#xFF0C;&#x7EC8;&#x6B62;&#xFF0C;&#x590D;&#x7528;&#x6E32;&#x67D3;&#x4EFB;&#x52A1;</li>
<li>&#x7ED9;&#x4E0D;&#x540C;&#x7C7B;&#x578B;&#x7684;&#x66F4;&#x65B0;&#x8D4B;&#x4E88;&#x4F18;&#x5148;&#x7EA7;</li>
<li>&#x5E76;&#x53D1;&#x65B9;&#x9762;&#x65B0;&#x7684;&#x57FA;&#x7840;&#x80FD;&#x529B;</li>
</ul>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5728;-react-&#x7684;-props-&#x4E0A;&#x5E94;&#x7528;&#x9A8C;&#x8BC1;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5728;-react-&#x7684;-props-&#x4E0A;&#x5E94;&#x7528;&#x9A8C;&#x8BC1;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5728;-react-&#x7684;-props-&#x4E0A;&#x5E94;&#x7528;&#x9A8C;&#x8BC1;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5728;-react-&#x7684;-props-&#x4E0A;&#x5E94;&#x7528;&#x9A8C;&#x8BC1;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5728;-react-&#x7684;-props-&#x4E0A;&#x5E94;&#x7528;&#x9A8C;&#x8BC1;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x5982;&#x4F55;&#x5728; React &#x7684; Props &#x4E0A;&#x5E94;&#x7528;&#x9A8C;&#x8BC1;&#xFF1F;</p></h3>
<blockquote>
<p>&#x4F7F;&#x7528;PropTypes&#x8FDB;&#x884C;&#x7C7B;&#x578B;&#x68C0;&#x67E5;</p>
</blockquote>
<p><a href="https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html#gatsby-focus-wrapper" target="_blank">PropTypes</a>&#x81EA;React v15.5&#x8D77;&#xFF0C;&#x8BF7;&#x4F7F;&#x7528;&#x8FD9;&#x4E2A;&#x5E93;<a href="https://www.npmjs.com/package/prop-types" target="_blank">prop-types</a></p>
<h5 id="what--why--when"><a name="what--why--when" class="anchor-navigation-ex-anchor" href="#what--why--when"><i class="fa fa-link" aria-hidden="true"></i></a><a name="what--why--when" class="plugin-anchor" href="#what--why--when"><i class="fa fa-link" aria-hidden="true"></i></a>What &amp; Why &amp; When</h5>
<blockquote>
<ul>
<li>&#x968F;&#x7740;&#x5E94;&#x7528;&#x7684;&#x4E0D;&#x65AD;&#x589E;&#x957F;&#xFF0C;&#x4E5F;&#x662F;&#x4E3A;&#x4E86;&#x4F7F;&#x7A0B;&#x5E8F;&#x8BBE;&#x8BA1;&#x66F4;&#x52A0;&#x4E25;&#x8C28;&#xFF0C;&#x6211;&#x4EEC;&#x901A;&#x5E38;&#x9700;&#x8981;&#x5BF9;&#x6570;&#x636E;&#x7684;&#x7C7B;&#x578B;&#xFF08;&#x503C;&#xFF09;&#x8FDB;&#x884C;&#x4E00;&#x4E9B;&#x5FC5;&#x8981;&#x7684;&#x9A8C;&#x8BC1;</li>
<li>&#x51FA;&#x4E8E;&#x6027;&#x80FD;&#x65B9;&#x9762;&#x7684;&#x8003;&#x8651;&#xFF0C;propTypes&#x4EC5;&#x5728;&#x5F00;&#x53D1;&#x6A21;&#x5F0F;&#x4E0B;&#x8FDB;&#x884C;&#x68C0;&#x6D4B;,&#x5728;&#x7A0B;&#x5E8F;&#x8FD0;&#x884C;&#x65F6;&#x5C31;&#x80FD;&#x68C0;&#x6D4B;&#x51FA;&#x9519;&#x8BEF;&#xFF0C;&#x4E0D;&#x80FD;&#x4F7F;&#x7528;&#x5230;&#x7528;&#x6237;&#x4EA4;&#x4E92;&#x63D0;&#x9192;&#x7528;&#x6237;&#x64CD;&#x4F5C;&#x9519;&#x8BEF;&#x7B49;</li>
<li>&#x4E5F;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;<a href="https://flow.org/" target="_blank">Flow</a>&#x6216;&#x8005;<a href="https://www.typescriptlang.org/" target="_blank">TypeScript</a>&#x505A;&#x7C7B;&#x578B;&#x68C0;&#x67E5;&#xFF0C;&#x540E;&#x671F;&#x5EFA;&#x8BAE;&#x7528;typescript&#x8FDB;&#x884C;&#x66FF;&#x4EE3;&#x66F4;&#x597D;</li>
</ul>
</blockquote>
<h5 id="where_1"><a name="where_1" class="anchor-navigation-ex-anchor" href="#where_1"><i class="fa fa-link" aria-hidden="true"></i></a><a name="where" class="plugin-anchor" href="#where"><i class="fa fa-link" aria-hidden="true"></i></a>Where</h5>
<blockquote>
<ul>
<li>class&#x7EC4;&#x4EF6;</li>
<li>&#x51FD;&#x6570;&#x7EC4;&#x4EF6;</li>
<li><a href="https://zh-hans.reactjs.org/docs/react-api.html#reactmemo" target="_blank">React.memo</a>&#x9AD8;&#x9636;&#x7EC4;&#x4EF6; <strong><em>&#x53EF;&#x81EA;&#x884C;&#x6269;&#x5C55;</em></strong></li>
<li><a href="https://zh-hans.reactjs.org/docs/react-api.html#reactforwardref" target="_blank">React.forwardRef</a>&#x7EC4;&#x4EF6; <strong><em>&#x53EF;&#x81EA;&#x884C;&#x6269;&#x5C55;</em></strong></li>
</ul>
</blockquote>
<h5 id="how_1"><a name="how_1" class="anchor-navigation-ex-anchor" href="#how_1"><i class="fa fa-link" aria-hidden="true"></i></a><a name="how" class="plugin-anchor" href="#how"><i class="fa fa-link" aria-hidden="true"></i></a>How</h5>
<blockquote>
<p>&#x6211;&#x4EEC;&#x5728;&#x7EC4;&#x4EF6;&#x7C7B;&#x4E0B;&#x6DFB;&#x52A0;&#x4E00;&#x4E2A;&#x9759;&#x6001;&#x5C5E;&#x6027; propTypes (&#x5C5E;&#x6027;&#x540D;&#x4E0D;&#x80FD;&#x66F4;&#x6539;)&#xFF0C;&#x5B83;&#x7684;&#x503C;&#x4E5F;&#x662F;&#x4E00;&#x4E2A;&#x5BF9;&#x8C61;&#xFF0C;&#x7528;&#x6765;&#x8BBE;&#x7F6E;&#x7EC4;&#x4EF6;&#x4E2D;props&#x7684;&#x9A8C;&#x8BC1;&#x89C4;&#x5219;&#xFF0C;key &#x662F;&#x8981;&#x9A8C;&#x8BC1;&#x7684;&#x5C5E;&#x6027;&#x540D;&#x79F0;&#xFF0C;value &#x662F;&#x9A8C;&#x8BC1;&#x89C4;&#x5219;&#x3002;</p>
</blockquote>
<pre><code class="lang-js"><span class="hljs-comment">// &#x7C7B;&#x7EC4;&#x4EF6;</span>
<span class="hljs-keyword">import</span> PropTypes <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;prop-types&apos;</span>;
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Greeting</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
  render() {
    <span class="hljs-keyword">return</span> (
      <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Hello, {this.props.name}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span></span>
    );
  }
}
<span class="hljs-comment">// &#x6307;&#x5B9A; props &#x7684;&#x9ED8;&#x8BA4;&#x503C;&#xFF1A;</span>
Greeting.defaultProps = {
  name: <span class="hljs-string">&apos;Stranger&apos;</span>
};
<span class="hljs-comment">// &#x7C7B;&#x7EC4;&#x4EF6;&#x5728;&#x8FD9;&#x91CC;&#x505A;&#x68C0;&#x6D4B;</span>
Greeting.propTypes = {
  <span class="hljs-comment">// v15.4 and below</span>
  <span class="hljs-comment">// name: React.PropTypes.string</span>
  name: PropTypes.string
};

<span class="hljs-comment">// &#x51FD;&#x6570;&#x7EC4;&#x4EF6;</span>
unction HelloWorldComponent({ name }) {
  <span class="hljs-keyword">return</span> (
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>Hello, {name}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
  )
}
<span class="hljs-comment">// &#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x5728;&#x8FD9;&#x91CC;&#x505A;&#x68C0;&#x6D4B;</span>
HelloWorldComponent.propTypes = {
  name: PropTypes.string
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> HelloWorldComponent
</code></pre>
<p><a href="https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html#proptypes" target="_blank">&#x66F4;&#x591A;&#x68C0;&#x6D4B;&#x7684;&#x7C7B;&#x578B;</a></p>
<h5 id="more_1"><a name="more_1" class="anchor-navigation-ex-anchor" href="#more_1"><i class="fa fa-link" aria-hidden="true"></i></a><a name="more" class="plugin-anchor" href="#more"><i class="fa fa-link" aria-hidden="true"></i></a>More</h5>
<ul>
<li>&#x9650;&#x5236;&#x5355;&#x4E2A;&#x5143;&#x7D20; <a href="https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html#requiring-single-child" target="_blank">PropTypes.element</a></li>
</ul>
<h3 id="&#x2605;&#x2605;-&#x5728;-react-&#x4E2D;&#x4F7F;&#x7528;&#x6784;&#x9020;&#x51FD;&#x6570;&#x548C;-getinitialstate-&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;"><a name="&#x2605;&#x2605;-&#x5728;-react-&#x4E2D;&#x4F7F;&#x7528;&#x6784;&#x9020;&#x51FD;&#x6570;&#x548C;-getinitialstate-&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;-&#x5728;-react-&#x4E2D;&#x4F7F;&#x7528;&#x6784;&#x9020;&#x51FD;&#x6570;&#x548C;-getinitialstate-&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;-&#x5728;-react-&#x4E2D;&#x4F7F;&#x7528;&#x6784;&#x9020;&#x51FD;&#x6570;&#x548C;-getinitialstate-&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;-&#x5728;-react-&#x4E2D;&#x4F7F;&#x7528;&#x6784;&#x9020;&#x51FD;&#x6570;&#x548C;-getinitialstate-&#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605; &#x5728; React &#x4E2D;&#x4F7F;&#x7528;&#x6784;&#x9020;&#x51FD;&#x6570;&#x548C; getInitialState &#x6709;&#x4EC0;&#x4E48;&#x533A;&#x522B;&#xFF1F;</p></h3>
<p><a href="https://stackoverflow.com/questions/30668326/what-is-the-difference-between-using-constructor-vs-getinitialstate-in-react-r" target="_blank">&#x53C2;&#x8003;-stackoverflow</a></p>
<pre><code class="lang-js"><span class="hljs-comment">// ES6</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
  <span class="hljs-keyword">constructor</span>(props) {
    <span class="hljs-keyword">super</span>(props);
    <span class="hljs-keyword">this</span>.state = { <span class="hljs-comment">/* initial state */</span> };
  }
}
<span class="hljs-comment">// ES5</span>
<span class="hljs-keyword">var</span> MyComponent = React.createClass({
  getInitialState() {
    <span class="hljs-keyword">return</span> { <span class="hljs-comment">/* initial state */</span> };
  },
});
</code></pre>
<blockquote>
<ul>
<li><del>&#x672C;&#x8D28;&#x4E0A;&#x5176;&#x5B9E;&#x662F;&#x7B49;&#x4EF7;&#x7684;&#xFF1F;</del></li>
<li>&#x533A;&#x522B;&#x5728;&#x4E8E;ES6&#x548C;ES5&#x672C;&#x8EAB;&#xFF0C;<strong><em>getInitialState</em></strong> &#x662F;&#x642D;&#x914D; <strong><em>React.createClass</em></strong> &#x4F7F;&#x7528;&#x7684;&#xFF0C; <strong><em>constructor</em></strong> &#x662F;&#x642D;&#x914D; <strong><em>React.Component</em></strong> &#x4F7F;&#x7528;&#x7684;</li>
<li>&#x5728;React&#x7EC4;&#x4EF6;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x4E2D; <strong><em>constructor</em></strong> &#x5148;&#x4E8E; <strong><em>getInitialState</em></strong></li>
</ul>
</blockquote>
<p><img src="https://i.stack.imgur.com/UaFba.png" alt="Life Cycle"></p>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x6709;&#x6761;&#x4EF6;&#x5730;&#x5411;-react-&#x7EC4;&#x4EF6;&#x6DFB;&#x52A0;&#x5C5E;&#x6027;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x6709;&#x6761;&#x4EF6;&#x5730;&#x5411;-react-&#x7EC4;&#x4EF6;&#x6DFB;&#x52A0;&#x5C5E;&#x6027;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x6709;&#x6761;&#x4EF6;&#x5730;&#x5411;-react-&#x7EC4;&#x4EF6;&#x6DFB;&#x52A0;&#x5C5E;&#x6027;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x6709;&#x6761;&#x4EF6;&#x5730;&#x5411;-react-&#x7EC4;&#x4EF6;&#x6DFB;&#x52A0;&#x5C5E;&#x6027;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x6709;&#x6761;&#x4EF6;&#x5730;&#x5411;-react-&#x7EC4;&#x4EF6;&#x6DFB;&#x52A0;&#x5C5E;&#x6027;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x5982;&#x4F55;&#x6709;&#x6761;&#x4EF6;&#x5730;&#x5411; React &#x7EC4;&#x4EF6;&#x6DFB;&#x52A0;&#x5C5E;&#x6027;&#xFF1F;</p></h3>
<p><a href="https://stackoverflow.com/questions/31163693/how-do-i-conditionally-add-attributes-to-react-components" target="_blank">&#x53C2;&#x8003;-stackoverflow</a></p>
<blockquote>
<ul>
<li>&#x5BF9;&#x4E8E;&#x67D0;&#x4E9B;&#x5C5E;&#x6027;&#xFF0C;React&#x8DB3;&#x591F;&#x667A;&#x80FD;&#x53EF;&#x4EE5;&#x5FFD;&#x7565;&#x8BE5;&#x5C5E;&#x6027;&#xFF0C;&#x6BD4;&#x5982;&#x503C;&#x4E3A;boolean&#x503C;&#x5C5E;&#x6027;&#x7684;&#x503C;</li>
<li>&#x4E5F;&#x53EF;&#x4EE5;&#x5199;&#x63A7;&#x5236;&#x8BED;&#x53E5;&#x7BA1;&#x7406;&#x662F;&#x5426;&#x7ED9;&#x7EC4;&#x4EF6;&#x6DFB;&#x52A0;&#x5C5E;&#x6027;</li>
</ul>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-hooks-&#x4F1A;&#x53D6;&#x4EE3;-render-props-&#x548C;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x5417;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-hooks-&#x4F1A;&#x53D6;&#x4EE3;-render-props-&#x548C;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x5417;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-hooks-&#x4F1A;&#x53D6;&#x4EE3;-render-props-&#x548C;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x5417;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-hooks-&#x4F1A;&#x53D6;&#x4EE3;-render-props-&#x548C;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x5417;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-hooks-&#x4F1A;&#x53D6;&#x4EE3;-render-props-&#x548C;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x5417;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; Hooks &#x4F1A;&#x53D6;&#x4EE3; `render props` &#x548C;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x5417;&#xFF1F;</p></h3>
<p><a href="https://zh-hans.reactjs.org/docs/hooks-faq.html#do-hooks-replace-render-props-and-higher-order-components" target="_blank">&#x5B98;&#x65B9;&#x7B80;&#x7B54;</a></p>
<blockquote>
<ul>
<li>&#x53EF;&#x4EE5;&#x53D6;&#x4EE3;&#xFF0C;&#x4F46;&#x6CA1;&#x5FC5;&#x8981;</li>
<li>&#x5728;Hook&#x7684;&#x6E10;&#x8FDB;&#x7B56;&#x7565;&#x4E2D;&#x4E5F;&#x6709;&#x63D0;&#x5230;&#xFF0C;&#x6CA1;&#x6709;&#x8BA1;&#x5212;&#x4ECE;React&#x4E2D;&#x79FB;&#x9664;class&#xFF0C;&#x5728;&#x65B0;&#x7684;&#x4EE3;&#x7801;&#x4E2D;&#x540C;&#x65F6;&#x4F7F;&#x7528;Hook&#x548C;class&#xFF0C;&#x6240;&#x4EE5;&#x8FD9;&#x4E9B;&#x65B9;&#x6848;&#x76EE;&#x524D;&#x8FD8;&#x662F;&#x53EF;&#x4EE5;&#x6709;&#x52C7;&#x6B66;&#x4E4B;&#x5730;</li>
</ul>
</blockquote>
<h5 id="what_2"><a name="what_2" class="anchor-navigation-ex-anchor" href="#what_2"><i class="fa fa-link" aria-hidden="true"></i></a><a name="what" class="plugin-anchor" href="#what"><i class="fa fa-link" aria-hidden="true"></i></a>What</h5>
<blockquote>
<ul>
<li>&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x628A;&#x8FD9;3&#x79CD;&#x6280;&#x672F;&#x62FF;&#x8FC7;&#x6765;&#x5BF9;&#x6BD4;&#xFF1F;</li>
</ul>
<blockquote>
<p>&#x90FD;&#x5728;&#x5904;&#x7406;&#x540C;&#x4E00;&#x4E2A;&#x95EE;&#x9898;&#xFF0C;<strong><em>&#x903B;&#x8F91;&#x590D;&#x7528;</em></strong></p>
</blockquote>
<ul>
<li><a href="https://zh-hans.reactjs.org/docs/higher-order-components.html" target="_blank">&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;HOC</a>---&#x4E0D;&#x662F; <em>React API</em> &#x7684;&#x4E00;&#x90E8;&#x5206;&#xFF0C;&#x662F;&#x57FA;&#x4E8E; <em>React</em> &#x7684;<strong>&#x7EC4;&#x5408;&#x7279;&#x6027;</strong>&#x5F62;&#x6210;&#x7684;&#x8BBE;&#x8BA1;&#x6A21;&#x5F0F;&#x3002;</li>
</ul>
<blockquote>
<p>&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x662F;&#x53C2;&#x6570;&#x4E3A;&#x7EC4;&#x4EF6;&#xFF0C;&#x8FD4;&#x56DE;&#x503C;&#x4E3A;&#x65B0;&#x7EC4;&#x4EF6;&#x7684;<strong>&#x51FD;&#x6570;</strong>&#xFF08;&#x5C06;&#x7EC4;&#x4EF6;&#x8F6C;&#x6362;&#x4E3A;&#x53E6;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#xFF0C;&#x7EAF;&#x51FD;&#x6570;&#xFF0C;&#x65E0;&#x526F;&#x4F5C;&#x7528;&#xFF09;</p>
</blockquote>
<ul>
<li><a href="https://zh-hans.reactjs.org/docs/render-props.html#gatsby-focus-wrapper" target="_blank">Render Props</a></li>
</ul>
<blockquote>
<p>&#x662F;&#x6307;&#x4E00;&#x79CD;&#x5728; <em>React</em> &#x7EC4;&#x4EF6;&#x4E4B;&#x95F4;&#x4F7F;&#x7528;&#x4E00;&#x4E2A;&#x503C;&#x4E3A;&#x51FD;&#x6570;&#x7684; <em>prop</em> &#x5171;&#x4EAB;&#x4EE3;&#x7801;&#x7684; <strong>&#x7B80;&#x5355;&#x6280;&#x672F;&#xFF1F;</strong></p>
</blockquote>
<ul>
<li><a href="https://zh-hans.reactjs.org/docs/hooks-intro.html" target="_blank">Hooks</a></li>
</ul>
<blockquote>
<p>React16.8&#x65B0;&#x589E;&#x7684;&#x7279;&#x6027;&#xFF0C;&#x662F;&#x4E00;&#x4E9B;&#x53EF;&#x4EE5;&#x8BA9;&#x4F60;&#x5728;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x91CC;&#x201C;&#x94A9;&#x5165;&#x201D;React state&#x53CA;&#x751F;&#x547D;&#x5468;&#x671F;&#x7B49;&#x7279;&#x6027;&#x7684;&#x51FD;&#x6570;&#xFF0C;</p>
</blockquote>
</blockquote>
<h5 id="why_1"><a name="why_1" class="anchor-navigation-ex-anchor" href="#why_1"><i class="fa fa-link" aria-hidden="true"></i></a><a name="why" class="plugin-anchor" href="#why"><i class="fa fa-link" aria-hidden="true"></i></a>Why</h5>
<blockquote>
<p>&#x867D;&#x7136; <strong><em>HOC</em></strong> &amp; <strong><em>Render Props</em></strong> &#x80FD;&#x5904;&#x7406;&#x903B;&#x8F91;&#x590D;&#x7528;&#x7684;&#x95EE;&#x9898;&#xFF0C;&#x4F46;&#x662F;&#x5374;&#x5B58;&#x5728;&#x5404;&#x81EA;&#x7684;&#x95EE;&#x9898;&#x3002;</p>
<p><strong><em>HOC</em></strong> &#x5B58;&#x5728;&#x7684;&#x95EE;&#x9898;</p>
<blockquote>
<ul>
<li>&#x5199;&#x6CD5;&#x7834;&#x574F;&#x4E86;&#x539F;&#x6765;&#x7EC4;&#x4EF6;&#x7684;&#x7ED3;&#x6784;&#xFF0C;DevTools&#x4E2D;&#x7EC4;&#x4EF6;&#x4F1A;&#x5F62;&#x6210;&#x201C;&#x5D4C;&#x5957;&#x5730;&#x72F1;&#x201D;</li>
<li>&#x4E0D;&#x8981;&#x5728; <strong>render</strong> &#x65B9;&#x6CD5;&#x4E2D;&#x4F7F;&#x7528; <strong>HOC</strong> &#x6BCF;&#x6B21;&#x8C03;&#x7528;render&#x51FD;&#x6570;&#x4F1A;&#x521B;&#x5EFA;&#x4E00;&#x4E2A;&#x65B0;&#x7684;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x5BFC;&#x81F4;&#x8BE5;&#x7EC4;&#x4EF6;&#x53CA;&#x5176;&#x5B50;&#x7EC4;&#x4EF6;&#x7684;&#x72B6;&#x6001;&#x4E22;&#x5931;</li>
<li>&#x9700;&#x8981;&#x4FEE;&#x590D;&#x9759;&#x6001;&#x65B9;&#x6CD5;&#xFF0C;&#x5373;&#x62F7;&#x8D1D;&#x539F;&#x7EC4;&#x4EF6;&#x7684;&#x9759;&#x6001;&#x65B9;&#x6CD5;&#x5230;&#x9AD8;&#x7EA7;&#x7EC4;&#x4EF6;&#x4E2D;</li>
<li>&#x5982;&#x9700;&#x4F20;&#x9012;Ref&#x5219;&#x9700;&#x8981;&#x901A;&#x8FC7;React.forwardRef&#x521B;&#x5EFA;&#x7EC4;&#x4EF6;</li>
</ul>
</blockquote>
<p><strong><em>Render Props</em></strong> &#x5B58;&#x5728;&#x7684;&#x95EE;&#x9898;</p>
<blockquote>
<ul>
<li>&#x540C;&#x6837;&#x7684;&#x5199;&#x6CD5;&#x4F1A;&#x7834;&#x574F;&#x539F;&#x6765;&#x7EC4;&#x4EF6;&#x7684;&#x7ED3;&#x6784;&#xFF0C;DevTools&#x4E2D;&#x7EC4;&#x4EF6;&#x4F1A;&#x5F62;&#x6210;&#x201C;&#x5D4C;&#x5957;&#x5730;&#x72F1;&#x201D;</li>
<li>&#x4E0E;React.PureComponent&#x7EC4;&#x4EF6;&#x4F7F;&#x7528;&#x6709;&#x51B2;&#x7A81;</li>
</ul>
</blockquote>
<p><strong><em>Hook</em></strong> &#x76EE;&#x524D;&#x6700;&#x4F18;&#x96C5;&#x7684;&#x5B9E;&#x73B0;&#xFF0C;React&#x4E3A;&#x5171;&#x4EAB;&#x72B6;&#x6001;&#x903B;&#x8F91;&#x63D0;&#x4F9B;&#x6700;&#x597D;&#x7684;&#x539F;&#x751F;&#x9014;&#x5F84;</p>
<blockquote>
<ul>
<li>&#x6CA1;&#x6709;&#x7834;&#x574F;&#x6027;&#x6539;&#x52A8;&#xFF0C;&#x5B8C;&#x5168;&#x53EF;&#x9009;&#xFF0C;100%&#x5411;&#x540E;&#x517C;&#x5BB9;</li>
<li>&#x89E3;&#x51B3;&#x590D;&#x6742;&#x7EC4;&#x4EF6;&#xFF0C;&#x4E2D;&#x903B;&#x8F91;&#x72B6;&#x6001;&#x3001;&#x526F;&#x4F5C;&#x7528;&#x548C;&#x5404;&#x79CD;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#x4E2D;&#x903B;&#x8F91;&#x4EE3;&#x7801;&#x6DF7;&#x5728;&#x4E00;&#x8D77;&#xFF0C;&#x96BE;&#x4EE5;&#x62C6;&#x5206;&#xFF0C;&#x751A;&#x81F3;&#x5F62;&#x6210;bug&#x7684;&#x95EE;&#x9898;</li>
<li>&#x5904;&#x7406;class&#x7EC4;&#x4EF6;&#x4E2D;</li>
</ul>
</blockquote>
</blockquote>
<h5 id="when_1"><a name="when_1" class="anchor-navigation-ex-anchor" href="#when_1"><i class="fa fa-link" aria-hidden="true"></i></a><a name="when" class="plugin-anchor" href="#when"><i class="fa fa-link" aria-hidden="true"></i></a>When</h5>
<blockquote>
<ul>
<li>&#x5728;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x4E2D;&#x610F;&#x8BC6;&#x5230;&#x8981;&#x5411;&#x5176;&#x6DFB;&#x52A0;&#x4E00;&#x4E9B;state---useState</li>
<li>&#x6709;&#x526F;&#x4F5C;&#x7528;&#x7684;&#x884C;&#x4E3A;&#x65F6;</li>
</ul>
</blockquote>
<h5 id="where_2"><a name="where_2" class="anchor-navigation-ex-anchor" href="#where_2"><i class="fa fa-link" aria-hidden="true"></i></a><a name="where" class="plugin-anchor" href="#where"><i class="fa fa-link" aria-hidden="true"></i></a>Where</h5>
<blockquote>
<ul>
<li>&#x53EA;&#x80FD;&#x5728;&#x51FD;&#x6570;&#x6700;&#x5916;&#x5C42;&#x8C03;&#x7528;Hook&#xFF0C;&#x4E0D;&#x8981;&#x5728;&#x5FAA;&#x73AF;&#x3001;&#x6761;&#x4EF6;&#x5224;&#x65AD;&#x6216;&#x8005;&#x5B50;&#x51FD;&#x6570;&#x4E2D;&#x8C03;&#x7528;</li>
<li>&#x53EA;&#x80FD;&#x5728;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x6216;&#x8005;&#x81EA;&#x5B9A;&#x4E49;Hook&#x4E2D;&#x8C03;&#x7528;Hook</li>
</ul>
</blockquote>
<h5 id="how_2"><a name="how_2" class="anchor-navigation-ex-anchor" href="#how_2"><i class="fa fa-link" aria-hidden="true"></i></a><a name="how" class="plugin-anchor" href="#how"><i class="fa fa-link" aria-hidden="true"></i></a>How</h5>
<blockquote>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x907F;&#x514D;&#x7EC4;&#x4EF6;&#x7684;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x907F;&#x514D;&#x7EC4;&#x4EF6;&#x7684;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x907F;&#x514D;&#x7EC4;&#x4EF6;&#x7684;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x907F;&#x514D;&#x7EC4;&#x4EF6;&#x7684;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x907F;&#x514D;&#x7EC4;&#x4EF6;&#x7684;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x5982;&#x4F55;&#x907F;&#x514D;&#x7EC4;&#x4EF6;&#x7684;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#xFF1F;</p></h3>
<h5 id="answer"><a name="answer" class="anchor-navigation-ex-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<blockquote>
<p>&#x5F53;porps/state&#x6539;&#x53D8;&#x65F6;&#x7EC4;&#x4EF6;&#x4F1A;&#x6267;&#x884C;render&#x51FD;&#x6570;&#x4E5F;&#x5C31;&#x662F;&#x91CD;&#x65B0;&#x6E32;&#x67D3;</p>
<ul>
<li>class&#x7EC4;&#x4EF6;&#x4E2D; &#x4F7F;&#x7528;shouldComponentUpdate&#x94A9;&#x5B50;&#x51FD;&#x6570;</li>
<li>PureComponent&#x9ED8;&#x8BA4;&#x6709;&#x907F;&#x514D;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x7684;&#x529F;&#x80FD;</li>
<li>&#x51FD;&#x6570;&#x7EC4;&#x4EF6;&#x4F7F;&#x7528;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;memo&#x5904;&#x7406;</li>
</ul>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;&#x7EAF;&#x51FD;&#x6570;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;&#x7EAF;&#x51FD;&#x6570;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;&#x7EAF;&#x51FD;&#x6570;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;&#x7EAF;&#x51FD;&#x6570;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;&#x7EAF;&#x51FD;&#x6570;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x4EC0;&#x4E48;&#x662F;&#x7EAF;&#x51FD;&#x6570;&#xFF1F;</p></h3>
<h5 id="answer_1"><a name="answer_1" class="anchor-navigation-ex-anchor" href="#answer_1"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<blockquote>
<p>&#x4E00;&#x4E2A;&#x4E0D;&#x4F1A;&#x66F4;&#x6539;&#x5165;&#x53C2;&#xFF0C;&#x4E14;&#x591A;&#x6B21;&#x8C03;&#x7528;&#x4E0B;&#x76F8;&#x540C;&#x7684;&#x5165;&#x53C2;&#x59CB;&#x7EC8;&#x8FD4;&#x56DE;&#x76F8;&#x540C;&#x7684;&#x7ED3;&#x679C;</p>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-&#x5F53;&#x8C03;&#x7528;setstate&#x65F6;&#xFF0C;react-render-&#x662F;&#x5982;&#x4F55;&#x5DE5;&#x4F5C;&#x7684;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-&#x5F53;&#x8C03;&#x7528;setstate&#x65F6;&#xFF0C;react-render-&#x662F;&#x5982;&#x4F55;&#x5DE5;&#x4F5C;&#x7684;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x5F53;&#x8C03;&#x7528;setstate&#x65F6;&#xFF0C;react-render-&#x662F;&#x5982;&#x4F55;&#x5DE5;&#x4F5C;&#x7684;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-&#x5F53;&#x8C03;&#x7528;setstate&#x65F6;&#xFF0C;react-render-&#x662F;&#x5982;&#x4F55;&#x5DE5;&#x4F5C;&#x7684;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x5F53;&#x8C03;&#x7528;setstate&#x65F6;&#xFF0C;react-render-&#x662F;&#x5982;&#x4F55;&#x5DE5;&#x4F5C;&#x7684;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; &#x5F53;&#x8C03;&#x7528;`setState`&#x65F6;&#xFF0C;React `render` &#x662F;&#x5982;&#x4F55;&#x5DE5;&#x4F5C;&#x7684;&#xFF1F;</p></h3>
<h5 id="answer_2"><a name="answer_2" class="anchor-navigation-ex-anchor" href="#answer_2"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<blockquote>
<p><strong>&#x8C03;&#x7528;setState()</strong></p>
<blockquote>
<ul>
<li>&#x68C0;&#x67E5;&#x4E0A;&#x4E0B;&#x6587;&#x73AF;&#x5883;&#x751F;&#x6210;&#x66F4;&#x65B0;&#x65F6;&#x95F4;&#x76F8;&#x5173;&#x53C2;&#x6570;&#x5E76;&#x5224;&#x5B9A;&#x4E8B;&#x4EF6;&#x4F18;&#x5148;&#x7EA7;&#xFF08;fiber&#xFF0C;currenttime&#xFF0C;expirationtime&#x7B49;&#x2026;&#xFF09;</li>
<li>&#x6839;&#x636E;&#x4F18;&#x5148;&#x7EA7;&#x76F8;&#x5173;&#x53C2;&#x6570;&#x5224;&#x65AD;&#x66F4;&#x65B0;&#x6A21;&#x5F0F;&#x662F;sync&#xFF08;&#x540C;&#x6B65;&#x66F4;&#x65B0;&#xFF09;&#x6216;&#x662F;batched&#xFF08;&#x6279;&#x91CF;&#x5904;&#x7406;&#xFF09;</li>
<li>&#x52A0;&#x5165;&#x6267;&#x884C;&#x66F4;&#x65B0;&#x4E8B;&#x4EF6;&#x7684;&#x961F;&#x5217;&#xFF0C;&#x751F;&#x6210;&#x4E8B;&#x4EF6;&#x961F;&#x5217;&#x7684;&#x94FE;&#x8868;&#x7ED3;&#x6784;</li>
<li>&#x6839;&#x636E;&#x94FE;&#x8868;&#x987A;&#x5E8F;&#x6267;&#x884C;&#x66F4;&#x65B0; </li>
</ul>
</blockquote>
<p><em>setState&#x65E2;&#x662F;&#x540C;&#x6B65;&#x7684;&#xFF0C;&#x4E5F;&#x662F;&#x5F02;&#x6B65;&#x7684;&#x3002;&#x540C;&#x6B65;&#x5F02;&#x6B65;&#x53D6;&#x51B3;&#x4E8E;setState&#x8FD0;&#x884C;&#x65F6;&#x7684;&#x4E0A;&#x4E0B;&#x6587;&#x3002;&#x4E14;setState &#x53EA;&#x5728;&#x5408;&#x6210;&#x4E8B;&#x4EF6;&#x548C;&#x94A9;&#x5B50;&#x51FD;&#x6570;&#x4E2D;&#x662F;&#x201C;&#x5F02;&#x6B65;&#x201D;&#x7684;&#xFF0C;&#x5728;&#x539F;&#x751F;DOM&#x4E8B;&#x4EF6;&#x548C; setTimeout &#x4E2D;&#x90FD;&#x662F;&#x540C;&#x6B65;&#x7684;</em></p>
<p><strong>render&#x5982;&#x4F55;&#x5DE5;&#x4F5C;</strong></p>
<blockquote>
<ul>
<li>React&#x5728;props&#x6216;state&#x53D1;&#x751F;&#x6539;&#x53D8;&#x65F6;&#xFF0C;&#x4F1A;&#x8C03;&#x7528;React&#x7684;render&#x65B9;&#x6CD5;&#xFF0C;&#x521B;&#x5EFA;&#x4E00;&#x9897;&#x4E0D;&#x540C;&#x7684;&#x6811;</li>
<li>React&#x9700;&#x8981;&#x57FA;&#x4E8E;&#x8FD9;&#x4E24;&#x9897;&#x4E0D;&#x540C;&#x7684;&#x6811;&#x4E4B;&#x95F4;&#x7684;&#x5DEE;&#x522B;&#x6765;&#x5224;&#x65AD;&#x5982;&#x4F55;&#x6709;&#x6548;&#x7684;&#x66F4;&#x65B0;UI</li>
<li>diff&#x7B97;&#x6CD5;&#xFF0C;&#x5C06;&#x4E24;&#x9897;&#x6811;&#x5B8C;&#x5168;&#x6BD4;&#x8F83;&#x66F4;&#x65B0;&#x7684;&#x7B97;&#x6CD5;&#x4ECE;O(n^3^),&#x4F18;&#x5316;&#x6210;O(n)&#xFF1B;</li>
</ul>
<blockquote>
<ul>
<li>&#x540C;&#x5C42;&#x8282;&#x70B9;&#x4E4B;&#x95F4;&#x76F8;&#x4E92;&#x6BD4;&#x8F83;&#xFF0C;&#x4E0D;&#x4F1A;&#x8DE8;&#x8282;&#x70B9;&#x6BD4;&#x8F83;</li>
<li>&#x4E0D;&#x540C;&#x7C7B;&#x578B;&#x7684;&#x8282;&#x70B9;&#xFF0C;&#x4EA7;&#x751F;&#x4E0D;&#x540C;&#x7684;&#x6811;&#x7ED3;&#x6784;</li>
<li>&#x8BBE;&#x7F6E;key&#x6765;&#x6307;&#x5B9A;&#x8282;&#x70B9;&#x5728;&#x4E0D;&#x540C;&#x7684;&#x6E32;&#x67D3;&#x4E0B;&#x4FDD;&#x6301;&#x7A33;&#x5B9A;</li>
</ul>
</blockquote>
</blockquote>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x907F;&#x514D;&#x5728;react&#x91CD;&#x65B0;&#x7ED1;&#x5B9A;&#x5B9E;&#x4F8B;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x907F;&#x514D;&#x5728;react&#x91CD;&#x65B0;&#x7ED1;&#x5B9A;&#x5B9E;&#x4F8B;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x907F;&#x514D;&#x5728;react&#x91CD;&#x65B0;&#x7ED1;&#x5B9A;&#x5B9E;&#x4F8B;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x907F;&#x514D;&#x5728;react&#x91CD;&#x65B0;&#x7ED1;&#x5B9A;&#x5B9E;&#x4F8B;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x907F;&#x514D;&#x5728;react&#x91CD;&#x65B0;&#x7ED1;&#x5B9A;&#x5B9E;&#x4F8B;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x5982;&#x4F55;&#x907F;&#x514D;&#x5728;React&#x91CD;&#x65B0;&#x7ED1;&#x5B9A;&#x5B9E;&#x4F8B;&#xFF1F;</p></h3>
<h5 id="answer_3"><a name="answer_3" class="anchor-navigation-ex-anchor" href="#answer_3"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<blockquote>
<ul>
<li>&#x5C06;&#x4E8B;&#x4EF6;&#x5904;&#x7406;&#x7A0B;&#x5E8F;&#x5B9A;&#x4E49;&#x4E3A;&#x5185;&#x8054;&#x7BAD;&#x5934;&#x51FD;&#x6570;</li>
<li>&#x4F7F;&#x7528;&#x7BAD;&#x5934;&#x51FD;&#x6570;&#x6765;&#x5B9A;&#x4E49;&#x65B9;&#x6CD5;</li>
<li>&#x4F7F;&#x7528;&#x5E26;&#x6709; Hooks &#x7684;&#x51FD;&#x6570;&#x7EC4;&#x4EF6;</li>
</ul>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x5728;js&#x539F;&#x751F;&#x4E8B;&#x4EF6;&#x4E2D;-onclick-&#x548C;-jsx-&#x91CC;-onclick-&#x7684;&#x533A;&#x522B;-"><a name="&#x2605;&#x2605;&#x2605;-&#x5728;js&#x539F;&#x751F;&#x4E8B;&#x4EF6;&#x4E2D;-onclick-&#x548C;-jsx-&#x91CC;-onclick-&#x7684;&#x533A;&#x522B;-" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x5728;js&#x539F;&#x751F;&#x4E8B;&#x4EF6;&#x4E2D;-onclick-&#x548C;-jsx-&#x91CC;-onclick-&#x7684;&#x533A;&#x522B;-"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x5728;js&#x539F;&#x751F;&#x4E8B;&#x4EF6;&#x4E2D;-onclick-&#x548C;-jsx-&#x91CC;-onclick-&#x7684;&#x533A;&#x522B;-" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x5728;js&#x539F;&#x751F;&#x4E8B;&#x4EF6;&#x4E2D;-onclick-&#x548C;-jsx-&#x91CC;-onclick-&#x7684;&#x533A;&#x522B;-"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x5728;js&#x539F;&#x751F;&#x4E8B;&#x4EF6;&#x4E2D; onclick &#x548C; jsx &#x91CC; onclick &#x7684;&#x533A;&#x522B; </p></h3>
<h5 id="answer_4"><a name="answer_4" class="anchor-navigation-ex-anchor" href="#answer_4"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<blockquote>
<p><strong>js&#x539F;&#x751F;&#x4E2D;</strong></p>
<ul>
<li>onclick&#x6DFB;&#x52A0;&#x4E8B;&#x4EF6;&#x5904;&#x7406;&#x51FD;&#x6570;&#x662F;&#x5728;&#x5168;&#x5C40;&#x73AF;&#x5883;&#x4E0B;&#x6267;&#x884C;&#xFF0C;&#x6C61;&#x67D3;&#x4E86;&#x5168;&#x5C40;&#x73AF;&#x5883;&#xFF0C;</li>
<li>&#x4E14;&#x7ED9;&#x5F88;&#x591A;dom&#x5143;&#x7D20;&#x6DFB;&#x52A0;onclick&#x4E8B;&#x4EF6;&#xFF0C;&#x5F71;&#x54CD;&#x7F51;&#x9875;&#x7684;&#x6027;&#x80FD;&#xFF0C;</li>
<li>&#x540C;&#x65F6;&#x5982;&#x679C;&#x52A8;&#x6001;&#x7684;&#x4ECE;dom&#x6811;&#x79CD;&#x5220;&#x9664;&#x4E86;&#x8BE5;&#x5143;&#x7D20;&#xFF0C;&#x8FD8;&#x8981;&#x624B;&#x52A8;&#x6CE8;&#x9500;&#x4E8B;&#x4EF6;&#x5904;&#x7406;&#x5668;&#xFF0C;&#x4E0D;&#x7136;&#x5C31;&#x53EF;&#x80FD;&#x9020;&#x6210;&#x5185;&#x5B58;&#x6CC4;&#x9732;</li>
</ul>
<p><strong>jsx&#x91CC;&#x7684;onClick</strong></p>
<ul>
<li>&#x6302;&#x8F7D;&#x7684;&#x51FD;&#x6570;&#x90FD;&#x63A7;&#x5236;&#x5728;&#x7EC4;&#x4EF6;&#x8303;&#x56F4;&#x5185;&#xFF0C;&#x4E0D;&#x4F1A;&#x6C61;&#x67D3;&#x5168;&#x5C40;&#x7A7A;&#x95F4;</li>
<li>jsx&#x4E2D;&#x4E0D;&#x662F;&#x76F4;&#x63A5;&#x4F7F;&#x7528;onclick&#xFF0C;&#x800C;&#x662F;&#x91C7;&#x53D6;&#x4E86;&#x4E8B;&#x4EF6;&#x59D4;&#x6258;&#x7684;&#x65B9;&#x5F0F;&#xFF0C;&#x6302;&#x8F7D;&#x6700;&#x9876;&#x5C42;DOM&#x8282;&#x70B9;&#xFF0C;&#x6240;&#x6709;&#x70B9;&#x51FB;&#x4E8B;&#x4EF6;&#x88AB;&#x8FD9;&#x4E2A;&#x4E8B;&#x4EF6;&#x6355;&#x83B7;&#xFF0C;&#x7136;&#x540E;&#x6839;&#x636E;&#x5177;&#x4F53;&#x7EC4;&#x4EF6;&#x5206;&#x914D;&#x7ED9;&#x7279;&#x5B9A;&#x51FD;&#x6570;&#xFF0C;&#x6027;&#x80FD;&#x5F53;&#x7136;&#x6BD4;&#x6BCF;&#x4E2A;onClick&#x90FD;&#x6302;&#x8F7D;&#x4E00;&#x4E2A;&#x4E8B;&#x4EF6;&#x5904;&#x7406;&#x51FD;&#x6570;&#x8981;&#x9AD8;</li>
<li>&#x52A0;&#x4E0A;React&#x63A7;&#x5236;&#x4E86;&#x7EC4;&#x4EF6;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#xFF0C;&#x5728;unmount&#x7684;&#x65F6;&#x5019;&#x81EA;&#x7136;&#x80FD;&#x591F;&#x6E05;&#x695A;&#x76F8;&#x5173;&#x7684;&#x6240;&#x6709;&#x4E8B;&#x4EF6;&#x5904;&#x7406;&#x51FD;&#x6570;&#xFF0C;&#x5185;&#x5B58;&#x6CC4;&#x9732;&#x4E0D;&#x518D;&#x662F;&#x4E00;&#x4E2A;&#x95EE;&#x9898;</li>
</ul>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-diff&#x590D;&#x6742;&#x5EA6;&#x539F;&#x7406;&#x53CA;&#x5177;&#x4F53;&#x8FC7;&#x7A0B;&#x753B;&#x56FE;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-diff&#x590D;&#x6742;&#x5EA6;&#x539F;&#x7406;&#x53CA;&#x5177;&#x4F53;&#x8FC7;&#x7A0B;&#x753B;&#x56FE;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-diff&#x590D;&#x6742;&#x5EA6;&#x539F;&#x7406;&#x53CA;&#x5177;&#x4F53;&#x8FC7;&#x7A0B;&#x753B;&#x56FE;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-diff&#x590D;&#x6742;&#x5EA6;&#x539F;&#x7406;&#x53CA;&#x5177;&#x4F53;&#x8FC7;&#x7A0B;&#x753B;&#x56FE;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-diff&#x590D;&#x6742;&#x5EA6;&#x539F;&#x7406;&#x53CA;&#x5177;&#x4F53;&#x8FC7;&#x7A0B;&#x753B;&#x56FE;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; diff&#x590D;&#x6742;&#x5EA6;&#x539F;&#x7406;&#x53CA;&#x5177;&#x4F53;&#x8FC7;&#x7A0B;&#x753B;&#x56FE;</p></h3>
<h5 id="answer_5"><a name="answer_5" class="anchor-navigation-ex-anchor" href="#answer_5"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<blockquote>
<ul>
<li>React &#x901A;&#x8FC7;&#x5236;&#x5B9A;&#x5927;&#x80C6;&#x7684; diff &#x7B56;&#x7565;&#xFF0C;&#x5C06; O(n3) &#x590D;&#x6742;&#x5EA6;&#x7684;&#x95EE;&#x9898;&#x8F6C;&#x6362;&#x6210; O(n) &#x590D;&#x6742;&#x5EA6;&#x7684;&#x95EE;&#x9898;&#xFF1B;</li>
<li>React &#x901A;&#x8FC7;&#x5206;&#x5C42;&#x6C42;&#x5F02;&#x7684;&#x7B56;&#x7565;&#xFF0C;&#x5BF9; tree diff &#x8FDB;&#x884C;&#x7B97;&#x6CD5;&#x4F18;&#x5316;&#xFF1B;</li>
<li>React &#x901A;&#x8FC7;&#x76F8;&#x540C;&#x7C7B;&#x751F;&#x6210;&#x76F8;&#x4F3C;&#x6811;&#x5F62;&#x7ED3;&#x6784;&#xFF0C;&#x4E0D;&#x540C;&#x7C7B;&#x751F;&#x6210;&#x4E0D;&#x540C;&#x6811;&#x5F62;&#x7ED3;&#x6784;&#x7684;&#x7B56;&#x7565;&#xFF0C;&#x5BF9; component diff &#x8FDB;&#x884C;&#x7B97;&#x6CD5;&#x4F18;&#x5316;&#xFF1B;</li>
<li>React &#x901A;&#x8FC7;&#x8BBE;&#x7F6E;&#x552F;&#x4E00; key&#x7684;&#x7B56;&#x7565;&#xFF0C;&#x5BF9; element diff &#x8FDB;&#x884C;&#x7B97;&#x6CD5;&#x4F18;&#x5316;&#xFF1B;</li>
<li>&#x5EFA;&#x8BAE;&#xFF0C;&#x5728;&#x5F00;&#x53D1;&#x7EC4;&#x4EF6;&#x65F6;&#xFF0C;&#x4FDD;&#x6301;&#x7A33;&#x5B9A;&#x7684; DOM &#x7ED3;&#x6784;&#x4F1A;&#x6709;&#x52A9;&#x4E8E;&#x6027;&#x80FD;&#x7684;&#x63D0;&#x5347;&#xFF1B;</li>
<li>&#x5EFA;&#x8BAE;&#xFF0C;&#x5728;&#x5F00;&#x53D1;&#x8FC7;&#x7A0B;&#x4E2D;&#xFF0C;&#x5C3D;&#x91CF;&#x51CF;&#x5C11;&#x7C7B;&#x4F3C;&#x5C06;&#x6700;&#x540E;&#x4E00;&#x4E2A;&#x8282;&#x70B9;&#x79FB;&#x52A8;&#x5230;&#x5217;&#x8868;&#x9996;&#x90E8;&#x7684;&#x64CD;&#x4F5C;&#xFF0C;&#x5F53;&#x8282;&#x70B9;&#x6570;&#x91CF;&#x8FC7;&#x5927;&#x6216;&#x66F4;&#x65B0;&#x64CD;&#x4F5C;&#x8FC7;&#x4E8E;&#x9891;&#x7E41;&#x65F6;&#xFF0C;&#x5728;&#x4E00;&#x5B9A;&#x7A0B;&#x5EA6;&#x4E0A;&#x4F1A;&#x5F71;&#x54CD; React &#x7684;&#x6E32;&#x67D3;&#x6027;&#x80FD;&#x3002;</li>
</ul>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-shouldcomponentupdate&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-shouldcomponentupdate&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-shouldcomponentupdate&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-shouldcomponentupdate&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-shouldcomponentupdate&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; shouldComponentUpdate&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;</p></h3>
<p><a href="https://zh-hans.reactjs.org/docs/optimizing-performance.html#shouldcomponentupdate-in-action" target="_blank">shouldComponentUpdate&#x7684;&#x4F5C;&#x7528;</a></p>
<h5 id="what_3"><a name="what_3" class="anchor-navigation-ex-anchor" href="#what_3"><i class="fa fa-link" aria-hidden="true"></i></a><a name="what" class="plugin-anchor" href="#what"><i class="fa fa-link" aria-hidden="true"></i></a>What</h5>
<blockquote>
<ul>
<li>&#x4E0D;&#x5E38;&#x7528;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x65B9;&#x6CD5;&#xFF0C;&#x80FD;&#x5F71;&#x54CD;&#x7EC4;&#x4EF6;&#x662F;&#x5426;&#x91CD;&#x65B0;&#x6E32;&#x67D3;</li>
<li>&#x5728;&#x66F4;&#x65B0;&#x9636;&#x6BB5;&#xFF0C;&#x5F53;&#x6709;new props &#x6216;&#x8005; &#x8C03;&#x7528;&#x4E86; setState()&#x65B9;&#x6CD5;&#xFF0C;&#x5728;render&#x65B9;&#x6CD5;&#x6267;&#x884C;&#x524D;&#x4F1A;&#x6267;&#x884C;&#x5230;&#xFF0C;&#x9ED8;&#x8BA4;&#x8FD4;&#x56DE;&#x503C;&#x4E3A;true&#xFF0C;&#x5982;&#x679C;&#x8FD4;&#x56DE;false&#x5219;&#x4E0D;&#x5237;&#x65B0;&#x7EC4;&#x4EF6;</li>
</ul>
</blockquote>
<h5 id="why--when--where"><a name="why--when--where" class="anchor-navigation-ex-anchor" href="#why--when--where"><i class="fa fa-link" aria-hidden="true"></i></a><a name="why--when--where" class="plugin-anchor" href="#why--when--where"><i class="fa fa-link" aria-hidden="true"></i></a>Why &amp; When &amp; Where</h5>
<blockquote>
<ul>
<li>&#x5982;&#x679C;&#x4F60;&#x77E5;&#x9053;&#x5728;&#x4EC0;&#x4E48;&#x60C5;&#x51B5;&#x4E0B;&#x7EC4;&#x4EF6;&#x4E0D;&#x9700;&#x8981;&#x66F4;&#x65B0;&#xFF0C;&#x4F60;&#x53EF;&#x4EE5;&#x8BA9;&#x5176;&#x8FD4;&#x56DE;&#x503C;&#x4E3A;false&#x8DF3;&#x8FC7;&#x6574;&#x4E2A;&#x6E32;&#x67D3;&#x8FC7;&#x7A0B; </li>
<li>&#x6B21;&#x65B9;&#x6CD5;&#x4EC5;&#x4F5C;&#x4E3A; <strong><em>&#x6027;&#x80FD;&#x4F18;&#x5316;&#x65B9;&#x5F0F;</em></strong> &#x800C;&#x5B58;&#x5728;&#xFF0C;&#x4E0D;&#x8981;&#x4F01;&#x56FE;&#x9760;&#x6B64;&#x65B9;&#x6CD5;&#x6765;&#x963B;&#x6B62;&#x6E32;&#x67D3;&#xFF0C; </li>
<li>&#x5927;&#x90E8;&#x5206;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x4F7F;&#x7528;PureComponent&#x4EE3;&#x66FF;&#x624B;&#x5199;shouldComponentUpdate&#xFF0C;&#x4EC5;&#x6D45;&#x5C42;&#x5BF9;&#x6BD4;</li>
<li>&#x4E0D;&#x5EFA;&#x8BAE;&#x5728;shoulComponentUpdate&#x4E2D;&#x8FDB;&#x884C;&#x6DF1;&#x5C42;&#x6216;&#x8005;&#x4F7F;&#x7528;JSON.stringify()&#xFF0C;&#x8FD9;&#x6837;&#x975E;&#x5E38;&#x5F71;&#x54CD;&#x6548;&#x7387;&#x548C;&#x6027;&#x80FD;</li>
</ul>
</blockquote>
<h5 id="answer_6"><a name="answer_6" class="anchor-navigation-ex-anchor" href="#answer_6"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<blockquote>
<ul>
<li>&#x4F5C;&#x4E3A;React&#x7EC4;&#x4EF6;&#x4E2D;&#x4E0D;&#x5E38;&#x7528;&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#xFF0C;&#x80FD;&#x5F71;&#x54CD;&#x7EC4;&#x4EF6;&#x662F;&#x5426;&#x91CD;&#x6E32;&#x67D3;</li>
<li>&#x5EFA;&#x8BAE;&#x505A;&#x6D45;&#x5C42;&#x6B21;&#x7684;&#x6BD4;&#x8F83;&#xFF0C;&#x6765;&#x4F18;&#x5316;&#x6027;&#x80FD;&#xFF0C;&#x5F53;&#x7136;&#x8FD9;&#x91CC;&#x4E5F;&#x53EF;&#x4EE5;&#x7528;PureComponent&#x7EC4;&#x4EF6;&#x4EE3;&#x66FF;</li>
<li>&#x5982;&#x679C;&#x6709;&#x8F83;&#x6DF1;&#x5C42;&#x6B21;&#x7684;&#x6BD4;&#x8F83;&#x5219;&#x53EF;&#x80FD;&#x4F1A;&#x5BFC;&#x81F4;&#x66F4;&#x4E25;&#x91CD;&#x7684;&#x6027;&#x80FD;&#x95EE;&#x9898;&#xFF0C;&#x56E0;&#x6B64;&#x5728;&#x8FD9;&#x79CD;&#x60C5;&#x51B5;&#x4E0B;&#x4E0D;&#x8981;&#x9760;&#x624B;&#x52A8;&#x7BA1;&#x7406;&#x7EC4;&#x4EF6;&#x7684;&#x91CD;&#x65B0;&#x6E32;&#x67D3;&#x6765;&#x4F18;&#x5316;&#x6027;&#x80FD;&#xFF0C;&#x8981;&#x627E;&#x5176;&#x4ED6;&#x65B9;&#x5F0F;</li>
<li><strong><em>&#x6BD4;&#x5982;&#xFF1F;</em></strong></li>
</ul>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;-react&#x7EC4;&#x4EF6;&#x95F4;&#x4FE1;&#x606F;&#x4F20;&#x9012;"><a name="&#x2605;&#x2605;&#x2605;-react&#x7EC4;&#x4EF6;&#x95F4;&#x4FE1;&#x606F;&#x4F20;&#x9012;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x7EC4;&#x4EF6;&#x95F4;&#x4FE1;&#x606F;&#x4F20;&#x9012;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-react&#x7EC4;&#x4EF6;&#x95F4;&#x4FE1;&#x606F;&#x4F20;&#x9012;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x7EC4;&#x4EF6;&#x95F4;&#x4FE1;&#x606F;&#x4F20;&#x9012;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; React&#x7EC4;&#x4EF6;&#x95F4;&#x4FE1;&#x606F;&#x4F20;&#x9012;</p></h3>
<h5 id="answer_7"><a name="answer_7" class="anchor-navigation-ex-anchor" href="#answer_7"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<blockquote>
<ul>
<li>1.&#xFF08;&#x7236;&#x7EC4;&#x4EF6;&#xFF09;&#x5411;&#xFF08;&#x5B50;&#x7EC4;&#x4EF6;&#xFF09;&#x4F20;&#x9012;&#x4FE1;&#x606F; :  <strong><em>porps&#x4F20;&#x503C;</em></strong></li>
<li>2.&#xFF08;&#x7236;&#x7EC4;&#x4EF6;&#xFF09;&#x5411;&#x66F4;&#x6DF1;&#x5C42;&#x7684;&#xFF08;&#x5B50;&#x7EC4;&#x4EF6;&#xFF09; &#x8FDB;&#x884C;&#x4F20;&#x9012;&#x4FE1;&#x606F; : <strong><em>context</em></strong></li>
<li>3.&#xFF08;&#x5B50;&#x7EC4;&#x4EF6;&#xFF09;&#x5411;&#xFF08;&#x7236;&#x7EC4;&#x4EF6;&#xFF09;&#x4F20;&#x9012;&#x4FE1;&#x606F;&#xFF1A;<strong><em>callback</em></strong></li>
<li>4.&#x6CA1;&#x6709;&#x4EFB;&#x4F55;&#x5D4C;&#x5957;&#x5173;&#x7CFB;&#x7684;&#x7EC4;&#x4EF6;&#x4E4B;&#x95F4;&#x4F20;&#x503C;&#xFF08;&#x6BD4;&#x5982;&#xFF1A;&#x5144;&#x5F1F;&#x7EC4;&#x4EF6;&#x4E4B;&#x95F4;&#x4F20;&#x503C;&#xFF09;: <strong><em>&#x5229;&#x7528;&#x5171;&#x540C;&#x7236;&#x7EC4;&#x4EF6;context&#x901A;&#x4FE1;&#x3001;&#x81EA;&#x5B9A;&#x4E49;&#x4E8B;&#x4EF6;</em></strong></li>
<li>5.&#x5229;&#x7528;react-redux&#x8FDB;&#x884C;&#x7EC4;&#x4EF6;&#x4E4B;&#x95F4;&#x7684;&#x72B6;&#x6001;&#x4FE1;&#x606F;&#x5171;&#x4EAB; : <strong><em>&#x7EC4;&#x4EF6;&#x95F4;&#x72B6;&#x6001;&#x4FE1;&#x606F;&#x5171;&#x4EAB;&#xFF1A;redux&#x3001;flux&#x3001;mobx&#x7B49;</em></strong></li>
</ul>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;-react&#x72B6;&#x6001;&#x7BA1;&#x7406;&#x5DE5;&#x5177;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;redux-actioncreator&#x90FD;&#x6709;&#x4EC0;&#x4E48;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-react&#x72B6;&#x6001;&#x7BA1;&#x7406;&#x5DE5;&#x5177;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;redux-actioncreator&#x90FD;&#x6709;&#x4EC0;&#x4E48;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x72B6;&#x6001;&#x7BA1;&#x7406;&#x5DE5;&#x5177;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;redux-actioncreator&#x90FD;&#x6709;&#x4EC0;&#x4E48;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-react&#x72B6;&#x6001;&#x7BA1;&#x7406;&#x5DE5;&#x5177;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;redux-actioncreator&#x90FD;&#x6709;&#x4EC0;&#x4E48;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x72B6;&#x6001;&#x7BA1;&#x7406;&#x5DE5;&#x5177;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;redux-actioncreator&#x90FD;&#x6709;&#x4EC0;&#x4E48;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; React&#x72B6;&#x6001;&#x7BA1;&#x7406;&#x5DE5;&#x5177;&#x6709;&#x54EA;&#x4E9B;&#xFF1F;redux actionCreator&#x90FD;&#x6709;&#x4EC0;&#x4E48;&#xFF1F;</p></h3>
<h5 id="answer_8"><a name="answer_8" class="anchor-navigation-ex-anchor" href="#answer_8"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<blockquote>
<ul>
<li>&#x7B80;&#x5355;&#x72B6;&#x6001;&#x7BA1;&#x7406;&#xFF1A;&#x7EC4;&#x4EF6;&#x5185;&#x90E8;state&#x3001;&#x57FA;*&#x4E8E;Context API&#x5C01;&#x88C5;&#x3001; </li>
<li>&#x590D;&#x6742;&#x72B6;&#x6001;&#x7BA1;&#x7406;&#xFF1A;redux(&#x5355;&#x9879;&#x6570;&#x636E;&#x6D41;)&#x3001;mobx(&#x54CD;&#x5E94;&#x5F0F;&#x6570;&#x636E;&#x6D41;)&#x3001;RxJS(stream)&#x3001;dva</li>
<li>&#x521B;&#x5EFA;&#x5404;&#x79CD;action&#xFF0C;&#x5305;&#x542B;&#x540C;&#x6B65;&#x3001;&#x5F02;&#x6B65;&#xFF0C;&#x7136;&#x540E;&#x5728;&#x7EC4;&#x4EF6;&#x4E2D;&#x901A;&#x8FC7;dispatch&#x8C03;&#x7528;</li>
</ul>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x3001;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#x53CA;&#x975E;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#xFF1F;&#x90FD;&#x6709;&#x5565;&#x533A;&#x522B;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x3001;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#x53CA;&#x975E;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#xFF1F;&#x90FD;&#x6709;&#x5565;&#x533A;&#x522B;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x3001;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#x53CA;&#x975E;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#xFF1F;&#x90FD;&#x6709;&#x5565;&#x533A;&#x522B;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x3001;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#x53CA;&#x975E;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#xFF1F;&#x90FD;&#x6709;&#x5565;&#x533A;&#x522B;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x3001;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#x53CA;&#x975E;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#xFF1F;&#x90FD;&#x6709;&#x5565;&#x533A;&#x522B;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; &#x4EC0;&#x4E48;&#x662F;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x3001;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#x53CA;&#x975E;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#xFF1F;&#x90FD;&#x6709;&#x5565;&#x533A;&#x522B;</p></h3>
<h5 id="answer_9"><a name="answer_9" class="anchor-navigation-ex-anchor" href="#answer_9"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<p><strong><em>&#x5B9A;&#x4E49;</em></strong></p>
<blockquote>
<ul>
<li><a href="https://zh-hans.reactjs.org/docs/higher-order-components.html" target="_blank">&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;HOC</a>---&#x4E0D;&#x662F; <em>React API</em> &#x7684;&#x4E00;&#x90E8;&#x5206;&#xFF0C;&#x662F;&#x57FA;&#x4E8E; <em>React</em> &#x7684;<strong>&#x7EC4;&#x5408;&#x7279;&#x6027;</strong>&#x5F62;&#x6210;&#x7684;&#x8BBE;&#x8BA1;&#x6A21;&#x5F0F;&#x3002;</li>
</ul>
<blockquote>
<p>&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x662F;&#x53C2;&#x6570;&#x4E3A;&#x7EC4;&#x4EF6;&#xFF0C;&#x8FD4;&#x56DE;&#x503C;&#x4E3A;&#x65B0;&#x7EC4;&#x4EF6;&#x7684;<strong>&#x51FD;&#x6570;</strong>&#xFF08;&#x5C06;&#x7EC4;&#x4EF6;&#x8F6C;&#x6362;&#x4E3A;&#x53E6;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#xFF0C;&#x7EAF;&#x51FD;&#x6570;&#xFF0C;&#x65E0;&#x526F;&#x4F5C;&#x7528;&#xFF09;</p>
</blockquote>
<ul>
<li><a href="https://zh-hans.reactjs.org/docs/forms.html#controlled-components" target="_blank">&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;</a></li>
</ul>
<blockquote>
<p>&#x5728;&#x8868;&#x5355;&#x5143;&#x7D20;&#x4E2D;&#xFF0C;state&#x662F;&#x552F;&#x4E00;&#x6570;&#x636E;&#x6E90;&#xFF0C;&#x6E32;&#x67D3;&#x8868;&#x5355;&#x7684;React&#x7EC4;&#x4EF6;&#x63A7;&#x5236;&#x7740;&#x7528;&#x6237;&#x8F93;&#x5165;&#x8FC7;&#x7A0B;&#x4E2D;&#x8868;&#x5355;&#x53D1;&#x751F;&#x7684;&#x64CD;&#x4F5C;&#x3002;&#x88AB;React&#x4EE5;&#x8FD9;&#x79CD;&#x65B9;&#x5F0F;&#x63A7;&#x5236;&#x53D6;&#x503C;&#x7684;&#x8868;&#x5355;&#x8F93;&#x5165;&#x5143;&#x7D20;&#x53EB;&#x505A;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;</p>
</blockquote>
<ul>
<li><a href="https://zh-hans.reactjs.org/docs/uncontrolled-components.html" target="_blank">&#x975E;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;</a></li>
</ul>
<blockquote>
<p>&#x8868;&#x5355;&#x6570;&#x636E;&#x7531;DOM&#x8282;&#x70B9;&#x6765;&#x5904;&#x7406;&#xFF0C;&#x800C;&#x4E0D;&#x662F;&#x7528;state&#x6765;&#x7BA1;&#x7406;&#x6570;&#x636E;&#xFF0C;&#x4E00;&#x822C;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;ref&#x6765;&#x4ECE;DOM&#x8282;&#x70B9;&#x4E2D;&#x83B7;&#x53D6;&#x8868;&#x5355;&#x6570;&#x636E;</p>
</blockquote>
</blockquote>
<p><strong><em>&#x533A;&#x522B;</em></strong></p>
<blockquote>
<ul>
<li>&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#x548C;&#x975E;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#x662F;&#x8868;&#x5355;&#x4E2D;&#x7684;&#x7EC4;&#x4EF6;&#xFF0C;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x76F8;&#x5F53;&#x4E8E;&#x5BF9;&#x67D0;&#x4E2A;&#x7EC4;&#x4EF6;&#x6CE8;&#x5165;&#x4E00;&#x4E9B;&#x5C5E;&#x6027;&#x65B9;&#x6CD5;</li>
<li>&#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x662F;&#x89E3;&#x51B3;&#x4EE3;&#x7801;&#x590D;&#x7528;&#x6027;&#x95EE;&#x9898;&#x4EA7;&#x751F;&#x7684;&#x6280;&#x672F;</li>
<li>&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#x5FC5;&#x987B;&#x8981;&#x6709;&#x4E00;&#x4E2A;value&#xFF0C;&#x7ED3;&#x5408;onChange&#x6765;&#x63A7;&#x5236;&#x8FD9;&#x4E2A;value&#xFF0C;&#x53D6;&#x503C;&#x4E3A;event.target.value/event.target.checked</li>
<li>&#x975E;&#x53D7;&#x63A7;&#x7EC4;&#x4EF6;&#x76F8;&#x5F53;&#x4E8E;&#x64CD;&#x4F5C;DOM&#xFF0C;&#x4E00;&#x822C;&#x6709;&#x4E2A;defaultValue&#xFF0C;&#x901A;&#x8FC7;onBlur&#x89E6;&#x53D1;&#x54CD;&#x5E94;&#x65B9;&#x6CD5;</li>
</ul>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;-vuex-&#x548C;-redux-&#x7684;&#x533A;&#x522B;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-vuex-&#x548C;-redux-&#x7684;&#x533A;&#x522B;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-vuex-&#x548C;-redux-&#x7684;&#x533A;&#x522B;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-vuex-&#x548C;-redux-&#x7684;&#x533A;&#x522B;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-vuex-&#x548C;-redux-&#x7684;&#x533A;&#x522B;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; vuex &#x548C; redux &#x7684;&#x533A;&#x522B;&#xFF1F;</p></h3>
<h5 id="answer_10"><a name="answer_10" class="anchor-navigation-ex-anchor" href="#answer_10"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<blockquote>
<p><strong><em>Redux</em></strong></p>
<ul>
<li>Redux &#x662F; JavaScript &#x72B6;&#x6001;&#x5BB9;&#x5668;&#xFF0C;&#x63D0;&#x4F9B;&#x53EF;&#x9884;&#x6D4B;&#x5316;&#x7684;&#x72B6;&#x6001;&#x7BA1;&#x7406;&#x3002; </li>
</ul>
<p><strong><em>Redux</em></strong></p>
<ul>
<li>&#x968F;&#x7740;JS&#x5355;&#x9875;&#x9762;&#x5E94;&#x7528;&#x65E5;&#x8D8B;&#x590D;&#x6742;&#xFF0C;JS&#x9700;&#x8981;&#x7BA1;&#x7406;&#x6BD4;&#x4EFB;&#x4F55;&#x65F6;&#x5019;&#x90FD;&#x8981;&#x591A;&#x7684;state&#xFF08;&#x670D;&#x52A1;&#x5668;&#x54CD;&#x5E94;&#xFF0C;&#x7F13;&#x5B58;&#x6570;&#x636E;&#xFF0C;&#x672C;&#x5730;&#x751F;&#x6210;&#x5C1A;&#x672A;&#x6301;&#x4E45;&#x5316;&#x5230;&#x670D;&#x52A1;&#x5668;&#x7684;&#x6570;&#x636E;&#xFF0C;UI&#x72B6;&#x6001;&#x7B49;&#xFF09; </li>
<li>&#x4F34;&#x968F;&#x7684;&#x73B0;&#x8C61;&#x5C31;&#x662F;models&#x548C;views&#x76F8;&#x4E92;&#x5F71;&#x54CD;&#xFF0C;&#x4F60;&#x96BE;&#x4EE5;&#x5F04;&#x6E05;&#x695A;&#x53D8;&#x5316;&#x7684;&#x6E90;&#x5934;</li>
<li>&#x4E5F;&#x5C31;&#x662F;&#x53D8;&#x5316;&#x548C;&#x5F02;&#x6B65;&#x8BA9;&#x6211;&#x4EEC;&#x7684;state&#x53D8;&#x5F97;&#x4E00;&#x56E2;&#x7CDF;</li>
</ul>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;-redux&#x9075;&#x5FAA;&#x7684;&#x4E09;&#x4E2A;&#x539F;&#x5219;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-redux&#x9075;&#x5FAA;&#x7684;&#x4E09;&#x4E2A;&#x539F;&#x5219;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-redux&#x9075;&#x5FAA;&#x7684;&#x4E09;&#x4E2A;&#x539F;&#x5219;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-redux&#x9075;&#x5FAA;&#x7684;&#x4E09;&#x4E2A;&#x539F;&#x5219;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-redux&#x9075;&#x5FAA;&#x7684;&#x4E09;&#x4E2A;&#x539F;&#x5219;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; Redux&#x9075;&#x5FAA;&#x7684;&#x4E09;&#x4E2A;&#x539F;&#x5219;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;</p></h3>
<h5 id="answer_11"><a name="answer_11" class="anchor-navigation-ex-anchor" href="#answer_11"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<blockquote>
<p><strong><em>&#x5355;&#x4E00;&#x6570;&#x636E;&#x6E90;</em></strong></p>
<ul>
<li>&#x6574;&#x4E2A;&#x5E94;&#x7528;&#x7684;state&#x88AB;&#x5B58;&#x50A8;&#x5728;&#x4E00;&#x68F5;object tree&#x4E2D;&#xFF0C;&#x5E76;&#x4E14;&#x6574;&#x4E2A; object tree &#x53EA;&#x5B58;&#x5728;&#x4E8E;&#x552F;&#x4E00;&#x4E00;&#x4E2A; store &#x4E2D;</li>
</ul>
<p><strong><em>State&#x662F;&#x53EA;&#x8BFB;&#x7684;</em></strong></p>
<ul>
<li>&#x552F;&#x4E00;&#x6539;&#x53D8;state&#x7684;&#x65B9;&#x6CD5;&#x5C31;&#x662F;&#x89E6;&#x53D1; action&#xFF0C;action&#x662F;&#x4E00;&#x4E2A;&#x63CF;&#x8FF0;&#x5DF2;&#x53D1;&#x751F;&#x4E8B;&#x4EF6;&#x7684;&#x666E;&#x901A;&#x5BF9;&#x8C61;</li>
<li>&#x8FD9;&#x6837;&#x786E;&#x4FDD;&#x89C6;&#x56FE;&#x548C;&#x7F51;&#x7EDC;&#x8BF7;&#x6C42;&#x4E0D;&#x80FD;&#x76F4;&#x63A5;&#x4FEE;&#x6539;state </li>
</ul>
<p><strong><em>&#x4F7F;&#x7528;&#x7EAF;&#x51FD;&#x6570;&#x6765;&#x6267;&#x884C;&#x4FEE;&#x6539;</em></strong></p>
<ul>
<li>&#x4E3A;&#x4E86;&#x63CF;&#x8FF0;action&#x5982;&#x4F55;&#x6539;&#x53D8;state tree&#xFF0C;&#x4F60;&#x9700;&#x8981;&#x7F16;&#x5199;reducers</li>
</ul>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x7684;keys&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x7684;keys&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x7684;keys&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x7684;keys&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x7684;keys&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; React&#x4E2D;&#x7684;keys&#x7684;&#x4F5C;&#x7528;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;</p></h3>
<h5 id="answer_12"><a name="answer_12" class="anchor-navigation-ex-anchor" href="#answer_12"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<blockquote>
<p>key &#x662F;&#x7528;&#x6765;&#x5E2E;&#x52A9; react &#x8BC6;&#x522B;&#x54EA;&#x4E9B;&#x5185;&#x5BB9;&#x88AB;&#x66F4;&#x6539;&#x3001;&#x6DFB;&#x52A0;&#x6216;&#x8005;&#x5220;&#x9664;&#x3002;key &#x9700;&#x8981;&#x5199;&#x5728;&#x7528;&#x6570;&#x7EC4;&#x6E32;&#x67D3;&#x51FA;&#x6765;&#x7684;&#x5143;&#x7D20;&#x5185;&#x90E8;&#xFF0C;&#x5E76;&#x4E14;&#x9700;&#x8981;&#x8D4B;&#x4E88;&#x5176;&#x4E00;&#x4E2A;&#x7A33;&#x5B9A;&#x7684;&#x503C;&#x3002;&#x7A33;&#x5B9A;&#x5728;&#x8FD9;&#x91CC;&#x5F88;&#x91CD;&#x8981;&#xFF0C;&#x56E0;&#x4E3A;&#x5982;&#x679C; key &#x503C;&#x53D1;&#x751F;&#x4E86;&#x53D8;&#x66F4;&#xFF0C;react &#x5219;&#x4F1A;&#x89E6;&#x53D1; UI &#x7684;&#x91CD;&#x6E32;&#x67D3;&#x3002;&#x8FD9;&#x662F;&#x4E00;&#x4E2A;&#x975E;&#x5E38;&#x6709;&#x7528;&#x7684;&#x7279;&#x6027;&#x3002;</p>
<ul>
<li>key &#x7684;&#x552F;&#x4E00;&#x6027;</li>
</ul>
<p>&#x5728;&#x76F8;&#x90BB;&#x7684;&#x5143;&#x7D20;&#x95F4;&#xFF0C;key &#x503C;&#x5FC5;&#x987B;&#x662F;&#x552F;&#x4E00;&#x7684;&#xFF0C;&#x5982;&#x679C;&#x51FA;&#x73B0;&#x4E86;&#x76F8;&#x540C;&#x7684; key&#xFF0C;&#x540C;&#x6837;&#x4F1A;&#x629B;&#x51FA;&#x4E00;&#x4E2A; Warning&#xFF0C;&#x544A;&#x8BC9;&#x76F8;&#x90BB;&#x7EC4;&#x4EF6;&#x95F4;&#x6709;&#x91CD;&#x590D;&#x7684; key &#x503C;&#x3002;&#x5E76;&#x4E14;&#x53EA;&#x4F1A;&#x6E32;&#x67D3;&#x7B2C;&#x4E00;&#x4E2A;&#x91CD;&#x590D; key &#x503C;&#x4E2D;&#x7684;&#x5143;&#x7D20;&#xFF0C;&#x56E0;&#x4E3A; react &#x4F1A;&#x8BA4;&#x4E3A;&#x540E;&#x7EED;&#x62E5;&#x6709;&#x76F8;&#x540C; key &#x7684;&#x90FD;&#x662F;&#x540C;&#x4E00;&#x4E2A;&#x7EC4;&#x4EF6;&#x3002;</p>
<ul>
<li>key &#x503C;&#x4E0D;&#x53EF;&#x8BFB;</li>
</ul>
<p>&#x867D;&#x7136;&#x6211;&#x4EEC;&#x5728;&#x7EC4;&#x4EF6;&#x4E0A;&#x5B9A;&#x4E49;&#x4E86; key&#xFF0C;&#x4F46;&#x662F;&#x5728;&#x5176;&#x5B50;&#x7EC4;&#x4EF6;&#x4E2D;&#xFF0C;&#x6211;&#x4EEC;&#x5E76;&#x6CA1;&#x6709;&#x529E;&#x6CD5;&#x62FF;&#x5230; key &#x7684;&#x503C;&#xFF0C;&#x56E0;&#x4E3A; key &#x4EC5;&#x4EC5;&#x662F;&#x7ED9; react &#x5185;&#x90E8;&#x4F7F;&#x7528;&#x7684;&#x3002;&#x5982;&#x679C;&#x6211;&#x4EEC;&#x9700;&#x8981;&#x4F7F;&#x7528;&#x5230; key &#x503C;&#xFF0C;&#x53EF;&#x4EE5;&#x901A;&#x8FC7;&#x5176;&#x4ED6;&#x65B9;&#x5F0F;&#x4F20;&#x5165;&#xFF0C;&#x6BD4;&#x5982;&#x5C06; key &#x503C;&#x8D4B;&#x7ED9; id &#x7B49;</p>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;-redux&#x4E2D;&#x4F7F;&#x7528;setstate&#x4E0D;&#x80FD;&#x7ACB;&#x523B;&#x83B7;&#x53D6;&#x503C;&#xFF0C;&#x600E;&#x4E48;&#x529E;"><a name="&#x2605;&#x2605;&#x2605;-redux&#x4E2D;&#x4F7F;&#x7528;setstate&#x4E0D;&#x80FD;&#x7ACB;&#x523B;&#x83B7;&#x53D6;&#x503C;&#xFF0C;&#x600E;&#x4E48;&#x529E;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-redux&#x4E2D;&#x4F7F;&#x7528;setstate&#x4E0D;&#x80FD;&#x7ACB;&#x523B;&#x83B7;&#x53D6;&#x503C;&#xFF0C;&#x600E;&#x4E48;&#x529E;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-redux&#x4E2D;&#x4F7F;&#x7528;setstate&#x4E0D;&#x80FD;&#x7ACB;&#x523B;&#x83B7;&#x53D6;&#x503C;&#xFF0C;&#x600E;&#x4E48;&#x529E;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-redux&#x4E2D;&#x4F7F;&#x7528;setstate&#x4E0D;&#x80FD;&#x7ACB;&#x523B;&#x83B7;&#x53D6;&#x503C;&#xFF0C;&#x600E;&#x4E48;&#x529E;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; redux&#x4E2D;&#x4F7F;&#x7528;setState&#x4E0D;&#x80FD;&#x7ACB;&#x523B;&#x83B7;&#x53D6;&#x503C;&#xFF0C;&#x600E;&#x4E48;&#x529E;</p></h3>
<h5 id="answer_13"><a name="answer_13" class="anchor-navigation-ex-anchor" href="#answer_13"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<blockquote>
<p>setState &#x53EA;&#x5728;&#x5408;&#x6210;&#x4E8B;&#x4EF6;&#x548C;&#x94A9;&#x5B50;&#x51FD;&#x6570;&#x4E2D;&#x662F;&#x5F02;&#x6B65;&#x7684;&#xFF0C;&#x5728;&#x539F;&#x751F;&#x4E8B;&#x4EF6;&#x548C; setTimeout &#x4E2D;&#x90FD;&#x662F;&#x540C;&#x6B65;</p>
<ul>
<li>&#x2460;addeventListener&#x6DFB;&#x52A0;&#x7684;&#x4E8B;&#x4EF6;&#x6216;&#x8005;dom&#x4E8B;&#x4EF6;&#x4E2D;&#x89E6;&#x53D1; </li>
<li>&#x2461;setState&#x63A5;&#x6536;&#x7684;&#x53C2;&#x6570;&#x8FD8;&#x53EF;&#x4EE5;&#x662F;&#x4E00;&#x4E2A;&#x51FD;&#x6570;&#xFF0C;&#x5728;&#x8FD9;&#x4E2A;&#x51FD;&#x6570;&#x4E2D;&#x53EF;&#x4EE5;&#x62FF;&#x5148;&#x524D;&#x7684;&#x72B6;&#x6001;&#xFF0C;&#x5E76;&#x901A;&#x8FC7;&#x8FD9;&#x4E2A;&#x51FD;&#x6570;&#x7684;&#x8FD4;&#x56DE;&#x503C;&#x5F97;&#x5230;&#x4E0B;&#x4E00;&#x4E2A;&#x72B6;&#x6001;&#x3002;</li>
</ul>
</blockquote>
<pre><code class="lang-js"> <span class="hljs-keyword">this</span>.setState((preState) =&gt; {
  <span class="hljs-keyword">return</span> {
    xxx: preState.xxx + yyy
  }
})
</code></pre>
<blockquote>
<ul>
<li>&#x2462;async/await &#x5F02;&#x6B65;&#x8C03;&#x7528;&#x5904;&#x7406;</li>
</ul>
</blockquote>
<h3 id="&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;jsx"><a name="&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;jsx" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;jsx"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;jsx" class="plugin-anchor" href="#&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;jsx"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605; &#x4EC0;&#x4E48;&#x662F;JSX</p></h3>
<h5 id="answer_14"><a name="answer_14" class="anchor-navigation-ex-anchor" href="#answer_14"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<blockquote>
<p>&#x5F53; Facebook &#x7B2C;&#x4E00;&#x6B21;&#x53D1;&#x5E03; React &#x65F6;&#xFF0C;&#x4ED6;&#x4EEC;&#x8FD8;&#x5F15;&#x5165;&#x4E86;&#x4E00;&#x79CD;&#x65B0;&#x7684; JS &#x65B9;&#x8A00; JSX&#xFF0C;&#x5C06;&#x539F;&#x59CB; HTML &#x6A21;&#x677F;&#x5D4C;&#x5165;&#x5230; JS &#x4EE3;&#x7801;&#x4E2D;&#x3002;JSX &#x4EE3;&#x7801;&#x672C;&#x8EAB;&#x4E0D;&#x80FD;&#x88AB;&#x6D4F;&#x89C8;&#x5668;&#x8BFB;&#x53D6;&#xFF0C;&#x5FC5;&#x987B;&#x4F7F;&#x7528;Babel&#x548C;webpack&#x7B49;&#x5DE5;&#x5177;&#x5C06;&#x5176;&#x8F6C;&#x6362;&#x4E3A;&#x4F20;&#x7EDF;&#x7684;JS&#x3002;&#x5F88;&#x591A;&#x5F00;&#x53D1;&#x4EBA;&#x5458;&#x5C31;&#x80FD;&#x65E0;&#x610F;&#x8BC6;&#x4F7F;&#x7528; JSX&#xFF0C;&#x56E0;&#x4E3A;&#x5B83;&#x5DF2;&#x7ECF;&#x4E0E; React &#x7ED3;&#x5408;&#x5728;&#x4E00;&#x76F4;&#x4E86;</p>
<ul>
<li>&#x662F;&#x4E00;&#x4E2A; JavaScript &#x7684;&#x8BED;&#x6CD5;&#x6269;&#x5C55;</li>
<li>&#x5177;&#x6709; JavaScript &#x7684;&#x5168;&#x90E8;&#x529F;&#x80FD;</li>
<li>&#x53EF;&#x4EE5;&#x751F;&#x6210; React &#x201C;&#x5143;&#x7D20;&#x201D;</li>
<li>JSX &#x4E5F;&#x662F;&#x4E00;&#x4E2A;&#x8868;&#x8FBE;&#x5F0F;</li>
</ul>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;-react&#x65B0;&#x8001;&#x7248;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;"><a name="&#x2605;&#x2605;&#x2605;-react&#x65B0;&#x8001;&#x7248;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x65B0;&#x8001;&#x7248;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-react&#x65B0;&#x8001;&#x7248;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x65B0;&#x8001;&#x7248;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; React&#x65B0;&#x8001;&#x7248;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;</p></h3>
<p><a href="https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/" target="_blank">&#x751F;&#x547D;&#x5468;&#x671F;</a></p>
<h5 id="answer_15"><a name="answer_15" class="anchor-navigation-ex-anchor" href="#answer_15"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<blockquote>
<p><strong><em>New Version</em></strong></p>
<ul>
<li>&#x6302;&#x8F7D;&#xFF1A;constructor --&gt; getDerivedStateFromProps --&gt; render --&gt; componentDidMount</li>
<li>&#x66F4;&#x65B0;&#xFF1A;</li>
</ul>
<blockquote>
<ul>
<li>New props&#x3001;setState() --&gt; getDerivedStateFromProps --&gt; shouldComponentUpdate --&gt; render --&gt; getSnapshotBeforeUpdate --&gt; componentDidUpdate</li>
<li>forceUpdate() --&gt; getDerivedStateFromProps --&gt; render --&gt; getSnapshotBeforeUpdate --&gt; componentDidUpdate</li>
</ul>
</blockquote>
<ul>
<li>&#x5378;&#x8F7D;&#xFF1A; componentWillUnmount</li>
</ul>
<p><strong><em>Old Version*</em></strong></p>
<ul>
<li>&#x6302;&#x8F7D;&#xFF1A;constructor --&gt; getDerivedStateFromProps --&gt; render --&gt; ComponentDidMount</li>
<li>&#x66F4;&#x65B0;&#xFF1A;</li>
</ul>
<blockquote>
<ul>
<li>New props --&gt; getDerivedStateFromProps --&gt; shouldComponentUpdate --&gt; render --&gt; getSnapshotBeforeUpdate --&gt; componentDidUpdate</li>
<li>setState() --&gt; shouldComponentUpdate --&gt; render --&gt; getSnapshotBeforeUpdate --&gt; componentDidUpdate</li>
<li>forceUpdate() --&gt; render --&gt; getSnapshotBeforeUpdate --&gt; componentDidUpdate</li>
</ul>
</blockquote>
<ul>
<li>&#x5378;&#x8F7D;&#xFF1A;componentWillUnmount</li>
</ul>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-vue-react&#x90FD;&#x600E;&#x4E48;&#x68C0;&#x6D4B;&#x6570;&#x636E;&#x53D8;&#x5316;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-vue-react&#x90FD;&#x600E;&#x4E48;&#x68C0;&#x6D4B;&#x6570;&#x636E;&#x53D8;&#x5316;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-vue-react&#x90FD;&#x600E;&#x4E48;&#x68C0;&#x6D4B;&#x6570;&#x636E;&#x53D8;&#x5316;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-vue-react&#x90FD;&#x600E;&#x4E48;&#x68C0;&#x6D4B;&#x6570;&#x636E;&#x53D8;&#x5316;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-vue-react&#x90FD;&#x600E;&#x4E48;&#x68C0;&#x6D4B;&#x6570;&#x636E;&#x53D8;&#x5316;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; vue react&#x90FD;&#x600E;&#x4E48;&#x68C0;&#x6D4B;&#x6570;&#x636E;&#x53D8;&#x5316;</p></h3>
<h5 id="answer_16"><a name="answer_16" class="anchor-navigation-ex-anchor" href="#answer_16"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<ul>
<li>React</li>
</ul>
<blockquote>
<p>React&#x9ED8;&#x8BA4;&#x662F;&#x901A;&#x8FC7;&#x6BD4;&#x8F83;&#x5F15;&#x7528;&#x7684;&#x65B9;&#x5F0F;&#xFF08;diff&#xFF09;&#x8FDB;&#x884C;&#x7684;&#xFF0C;&#x4E0D;&#x7CBE;&#x786E;&#x76D1;&#x542C;&#x6570;&#x636E;&#x53D8;&#x5316;&#xFF0C;&#x5982;&#x679C;&#x4E0D;&#x4F18;&#x5316;&#x53EF;&#x80FD;&#x5BFC;&#x81F4;&#x5927;&#x91CF;&#x4E0D;&#x5FC5;&#x8981;&#x7684;VDOM&#x91CD;&#x65B0;&#x6E32;&#x67D3;</p>
<ul>
<li>16&#x4E4B;&#x524D; <em>componentWillReveiveProps</em> &#x76D1;&#x542C; <em>props</em> &#x53D8;&#x5316;</li>
<li>16&#x4E4B;&#x540E; <em>getDerivedStateFromProps</em> &#x76D1;&#x542C; <em>props</em> </li>
</ul>
</blockquote>
<ul>
<li>Vue</li>
</ul>
<blockquote>
<ul>
<li>vue&#x76D1;&#x542C;&#x53D8;&#x91CF;&#x53D8;&#x5316;&#x4F9D;&#x9760; <em>watch</em> <em>Object.defineProperty</em>&#xFF0C;Vue&#x901A;&#x8FC7;&#x201C;getter/setter&#x201D;&#x4EE5;&#x53CA;&#x4E00;&#x4E9B;&#x51FD;&#x6570;&#x7684;&#x52AB;&#x6301;&#xFF0C;&#x80FD;&#x7CBE;&#x786E;&#x77E5;&#x9053;&#x6570;&#x636E;&#x53D8;&#x5316;</li>
</ul>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x600E;&#x4E48;&#x8BA9;-setstate-&#x540C;&#x6B65;&#x66F4;&#x65B0;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x600E;&#x4E48;&#x8BA9;-setstate-&#x540C;&#x6B65;&#x66F4;&#x65B0;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x600E;&#x4E48;&#x8BA9;-setstate-&#x540C;&#x6B65;&#x66F4;&#x65B0;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x600E;&#x4E48;&#x8BA9;-setstate-&#x540C;&#x6B65;&#x66F4;&#x65B0;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x600E;&#x4E48;&#x8BA9;-setstate-&#x540C;&#x6B65;&#x66F4;&#x65B0;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; React&#x4E2D;&#x600E;&#x4E48;&#x8BA9; setState &#x540C;&#x6B65;&#x66F4;&#x65B0;&#xFF1F;</p></h3>
<h5 id="answer_17"><a name="answer_17" class="anchor-navigation-ex-anchor" href="#answer_17"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<blockquote>
<ul>
<li><em>setState</em> &#x56DE;&#x8C03;&#xFF0C;<em>setState</em>,&#x7B2C;&#x4E8C;&#x4E2A;&#x53C2;&#x6570;&#x662F;&#x4E00;&#x4E2A;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#xFF0C;&#x53EF;&#x5B9E;&#x73B0;&#x540C;&#x6B65;</li>
<li>&#x5F15;&#x5165; <em>Promise</em> &#x5C01;&#x88C5; <em>setState</em>&#xFF0C;&#x5728;&#x8C03;&#x7528;&#x65F6;&#x6211;&#x4EEC;&#x53EF;&#x4EE5;&#x4F7F;&#x7528; <em>Async/Await</em> &#x8BED;&#x6CD5;&#x6765;&#x4F18;&#x5316;&#x4EE3;&#x7801;&#x98CE;&#x683C;</li>
</ul>
<pre><code>setStateAsync(state) {
  return new Promise((resolve) =&gt; {
    this.setState(state, resolve)
  });
}
</code></pre><ul>
<li>&#x4F20;&#x5165;&#x72B6;&#x6001;&#x8BA1;&#x7B97;&#x51FD;&#x6570;&#xFF0C; <em>setState</em> &#x7684;&#x7B2C;&#x4E00;&#x4E2A;&#x53C2;&#x6570;&#xFF0C;</li>
</ul>
<pre><code>this.setState((prevState, props) =&gt; ({
 count: prevState.count + 1
}));
</code></pre><ul>
<li>&#x5728; <em>setTimeout</em> &#x51FD;&#x6570;&#x4E2D;&#x8C03;&#x7528; <em>setState</em> </li>
<li>more&#xFF1F;</li>
</ul>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-immutable&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x4F7F;&#x7528;&#x5B83;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-immutable&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x4F7F;&#x7528;&#x5B83;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-immutable&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x4F7F;&#x7528;&#x5B83;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-immutable&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x4F7F;&#x7528;&#x5B83;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x4EC0;&#x4E48;&#x662F;-immutable&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x4F7F;&#x7528;&#x5B83;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; &#x4EC0;&#x4E48;&#x662F; immutable&#xFF1F;&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x4F7F;&#x7528;&#x5B83;&#xFF1F;</p></h3>
<h5 id="answer_18"><a name="answer_18" class="anchor-navigation-ex-anchor" href="#answer_18"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<blockquote>
<p>immutable&#x662F;&#x4E00;&#x79CD;&#x6301;&#x4E45;&#x5316;&#x6570;&#x636E;&#x3002;&#x4E00;&#x65E6;&#x88AB;&#x521B;&#x5EFA;&#x5C31;&#x4E0D;&#x4F1A;&#x88AB;&#x4FEE;&#x6539;&#x3002;&#x4FEE;&#x6539;immutable&#x5BF9;&#x8C61;&#x7684;&#x65F6;&#x5019;&#x8FD4;&#x56DE;&#x65B0;&#x7684;immutable&#x3002;&#x4F46;&#x662F;&#x539F;&#x6570;&#x636E;&#x4E0D;&#x4F1A;&#x6539;&#x53D8;&#x3002;</p>
<p>&#x5728;Rudux&#x4E2D;&#x56E0;&#x4E3A;&#x6DF1;&#x62F7;&#x8D1D;&#x5BF9;&#x6027;&#x80FD;&#x7684;&#x6D88;&#x8017;&#x592A;&#x5927;&#x4E86;&#xFF08;&#x7528;&#x5230;&#x4E86;&#x9012;&#x5F52;&#xFF0C;&#x9010;&#x5C42;&#x62F7;&#x8D1D;&#x6BCF;&#x4E2A;&#x8282;&#x70B9;&#xFF09;&#x3002;
&#x4F46;&#x5F53;&#x4F60;&#x4F7F;&#x7528;immutable&#x6570;&#x636E;&#x7684;&#x65F6;&#x5019;&#xFF1A;&#x53EA;&#x4F1A;&#x62F7;&#x8D1D;&#x4F60;&#x6539;&#x53D8;&#x7684;&#x8282;&#x70B9;&#xFF0C;&#x4ECE;&#x800C;&#x8FBE;&#x5230;&#x4E86;&#x8282;&#x7701;&#x6027;&#x80FD;&#x3002;
&#x603B;&#x7ED3;&#xFF1A;immutable&#x7684;&#x4E0D;&#x53EF;&#x53D8;&#x6027;&#x8BA9;&#x7EAF;&#x51FD;&#x6570;&#x66F4;&#x5F3A;&#x5927;&#xFF0C;&#x6BCF;&#x6B21;&#x90FD;&#x8FD4;&#x56DE;&#x65B0;&#x7684;immutable&#x7684;&#x7279;&#x6027;&#x8BA9;&#x7A0B;&#x5E8F;&#x5458;&#x53EF;&#x4EE5;&#x5BF9;&#x5176;&#x8FDB;&#x884C;&#x94FE;&#x5F0F;&#x64CD;&#x4F5C;&#xFF0C;&#x7528;&#x8D77;&#x6765;&#x66F4;&#x65B9;&#x4FBF;&#x3002;</p>
<p>&#x56E0;&#x4E3A;&#x5728;react&#x4E2D;&#xFF0C;react&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x4E2D;&#x7684;setState()&#x4E4B;&#x540E;&#x7684;shouldComponentUpdate()&#x9636;&#x6BB5;&#x9ED8;&#x8BA4;&#x8FD4;&#x56DE;true&#xFF0C;&#x6240;&#x4EE5;&#x4F1A;&#x9020;&#x6210;&#x672C;&#x7EC4;&#x4EF6;&#x548C;&#x5B50;&#x7EC4;&#x4EF6;&#x7684;&#x591A;&#x4F59;&#x7684;render&#xFF0C;&#x91CD;&#x65B0;&#x751F;&#x6210;virtual dom&#xFF0C;&#x5E76;&#x8FDB;&#x884C;virtual dom diff&#xFF0C;&#x6240;&#x4EE5;&#x89E3;&#x51B3;&#x529E;&#x6CD5;&#x662F;&#x6211;&#x4EEC;&#x5728;&#x672C;&#x7EC4;&#x4EF6;&#x6216;&#x8005;&#x5B50;&#x7EC4;&#x4EF6;&#x4E2D;&#x7684;shouldComponentUpdate()&#x51FD;&#x6570;&#x4E2D;&#x6BD4;&#x8F83;&#xFF0C;&#x5F53;&#x4E0D;&#x9700;&#x8981;render&#x65F6;&#xFF0C;&#x4E0D;render&#x3002;</p>
<p>&#x5F53;state&#x4E2D;&#x7684;&#x503C;&#x662F;&#x5BF9;&#x8C61;&#x65F6;&#xFF0C;&#x6211;&#x4EEC;&#x5FC5;&#x987B;&#x4F7F;&#x7528;&#x6DF1;&#x62F7;&#x8D1D;&#x548C;&#x6DF1;&#x6BD4;&#x8F83;&#xFF01;</p>
<p>&#x5982;&#x679C;&#x4E0D;&#x8FDB;&#x884C;&#x6DF1;&#x62F7;&#x8D1D;&#x540E;&#x518D;setState&#xFF0C;&#x4F1A;&#x9020;&#x6210;this.state&#x548C;nextState&#x6307;&#x5411;&#x540C;&#x4E00;&#x4E2A;&#x5F15;&#x7528;&#xFF0C;&#x6240;&#x4EE5;shouldComponentUpdate()&#x8FD4;&#x56DE;&#x503C;&#x4E00;&#x5B9A;&#x662F;false&#xFF0C;&#x9020;&#x6210;state&#x503C;&#x6539;&#x4E86;&#xFF0C;&#x800C;&#x7EC4;&#x4EF6;&#x672A;&#x6E32;&#x67D3;&#xFF08;&#x8FD9;&#x91CC;&#x4E0D;&#x7BA1;shouldComponentUpdate&#x4E2D;&#x4F7F;&#x7528;&#x7684;&#x662F;&#x6DF1;&#x6BD4;&#x8F83;&#x8FD8;&#x662F;&#x6D45;&#x6BD4;&#x8F83;&#xFF09;&#x3002;&#x6240;&#x4EE5;&#x5FC5;&#x987B;&#x6DF1;&#x62F7;&#x8D1D;&#x3002;</p>
<p>&#x5982;&#x679C;&#x4E0D;&#x5728;shouldComponentUpdate&#x4E2D;&#x8FDB;&#x884C;&#x6DF1;&#x6BD4;&#x8F83;&#xFF0C;&#x4F1A;&#x9020;&#x6210;&#x5373;&#x4F7F;state&#x4E2D;&#x7684;&#x5BF9;&#x8C61;&#x503C;&#x6CA1;&#x6709;&#x6539;&#x53D8;&#xFF0C;&#x56E0;&#x4E3A;&#x662F;&#x4E0D;&#x540C;&#x7684;&#x5BF9;&#x8C61;&#xFF0C;&#x800C;&#x5728;shouldComponentUpdate&#x8FD4;&#x56DE;true&#xFF0C;&#x9020;&#x6210;&#x4E0D;&#x5FC5;&#x8981;&#x7684;&#x6E32;&#x67D3;&#x3002;</p>
<p>&#x6240;&#x4EE5;&#x53EA;&#x80FD;&#x662F;&#x6DF1;&#x62F7;&#x8D1D;&#x548C;&#x6DF1;&#x6BD4;&#x8F83;&#x3002;</p>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x4E0D;&#x5EFA;&#x8BAE;&#x5728;-componentwillmount-&#x505A;ajax&#x64CD;&#x4F5C;"><a name="&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x4E0D;&#x5EFA;&#x8BAE;&#x5728;-componentwillmount-&#x505A;ajax&#x64CD;&#x4F5C;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x4E0D;&#x5EFA;&#x8BAE;&#x5728;-componentwillmount-&#x505A;ajax&#x64CD;&#x4F5C;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x4E0D;&#x5EFA;&#x8BAE;&#x5728;-componentwillmount-&#x505A;ajax&#x64CD;&#x4F5C;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x4E0D;&#x5EFA;&#x8BAE;&#x5728;-componentwillmount-&#x505A;ajax&#x64CD;&#x4F5C;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x4E3A;&#x4EC0;&#x4E48;&#x4E0D;&#x5EFA;&#x8BAE;&#x5728; componentWillMount &#x505A;AJAX&#x64CD;&#x4F5C;</p></h3>
<h5 id="answer_19"><a name="answer_19" class="anchor-navigation-ex-anchor" href="#answer_19"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<blockquote>
<ul>
<li>Fiber&#x539F;&#x56E0;&#xFF0C;React16&#x4E4B;&#x540E;&#xFF0C;&#x91C7;&#x7528;&#x4E86;Fiber&#x67B6;&#x6784;&#xFF0C;&#x53EA;&#x6709;componentDidMount&#x7684;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#x786E;&#x5B9A;&#x4F1A;&#x6267;&#x884C;&#x4E00;&#x6B21;&#xFF0C;&#x5176;&#x4ED6;&#x50CF;componentWillMount&#x53EF;&#x80FD;&#x4F1A;&#x6267;&#x884C;&#x591A;&#x6B21;</li>
<li>render &#x9636;&#x6BB5; &#x53EF;&#x80FD;&#x4F1A;&#x88AB;React&#x6682;&#x505C;&#xFF0C;&#x4E2D;&#x6B62;&#x6216;&#x91CD;&#x542F;</li>
</ul>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5728;react&#x4E2D;&#x6784;&#x5EFA;&#x4E00;&#x4E2A;&#x5F39;&#x51FA;&#x7684;&#x906E;&#x7F69;&#x5C42;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5728;react&#x4E2D;&#x6784;&#x5EFA;&#x4E00;&#x4E2A;&#x5F39;&#x51FA;&#x7684;&#x906E;&#x7F69;&#x5C42;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5728;react&#x4E2D;&#x6784;&#x5EFA;&#x4E00;&#x4E2A;&#x5F39;&#x51FA;&#x7684;&#x906E;&#x7F69;&#x5C42;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5728;react&#x4E2D;&#x6784;&#x5EFA;&#x4E00;&#x4E2A;&#x5F39;&#x51FA;&#x7684;&#x906E;&#x7F69;&#x5C42;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-&#x5982;&#x4F55;&#x5728;react&#x4E2D;&#x6784;&#x5EFA;&#x4E00;&#x4E2A;&#x5F39;&#x51FA;&#x7684;&#x906E;&#x7F69;&#x5C42;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; &#x5982;&#x4F55;&#x5728;React&#x4E2D;&#x6784;&#x5EFA;&#x4E00;&#x4E2A;&#x5F39;&#x51FA;&#x7684;&#x906E;&#x7F69;&#x5C42;</p></h3>
<h5 id="answer_20"><a name="answer_20" class="anchor-navigation-ex-anchor" href="#answer_20"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<pre><code class="lang-css">//css&#x90E8;&#x5206;
.mask{
  background: rgba(0,0,0,0.4) !important;
  z-index: 10;
  height: 100vh;
  position: fixed;
  width: 100vw;
}
.selectMask_box{
  background: rgba(0,0,0,0);
  transition: all .2s linear
}
</code></pre>
<pre><code class="lang-js">//js&#x90E8;&#x5206;
handleMask=()=&gt;{
this.setState({
   dateSelected: !this.state.dateSelected
})
}
&lt;div
    onClick={this.handleMask}
    className={`selectMask_box ${this.state.dateSelected ? &quot;mask&quot; : &quot;&quot;} `} &gt;

  //&#x8FD9;&#x91CC;&#x662F;&#x5F85;&#x5C55;&#x793A;&#x7684;&#x5185;&#x5BB9;&#xFF0C;&lt;div&gt;...&lt;/div&gt;
 //&#x4F60;&#x53EF;&#x4EE5;&#x81EA;&#x5DF1;&#x8BBE;&#x7F6E;dataSelected&#x7684;&#x521D;&#x59CB;&#x503C;&#xFF0C;&#x540C;&#x65F6;&#x8BF7;&#x6CE8;&#x610F;&#x6CE8;&#x610F;&#x4E09;&#x5143;&#x8FD0;&#x7B97;&#x7684;&#x987A;&#x5E8F;&#x3002;
&lt;/div&gt;
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x7684;context&#x7684;&#x4F7F;&#x7528;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x7684;context&#x7684;&#x4F7F;&#x7528;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x7684;context&#x7684;&#x4F7F;&#x7528;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x7684;context&#x7684;&#x4F7F;&#x7528;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x7684;context&#x7684;&#x4F7F;&#x7528;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605;&#x2605; React&#x4E2D;&#x7684;Context&#x7684;&#x4F7F;&#x7528;</p></h3>
<p><a href="https://zh-hans.reactjs.org/docs/context.html#gatsby-focus-wrapper" target="_blank">React Context</a><br><strong><em><a href="https://react.jokcy.me/book/features/context.html" target="_blank">&#x6E90;&#x7801;&#x89E3;&#x6790;</a></em></strong></p>
<h5 id="answer_21"><a name="answer_21" class="anchor-navigation-ex-anchor" href="#answer_21"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<pre><code class="lang-js"><span class="hljs-comment">// &#x2460;&#x521B;&#x5EFA;</span>
<span class="hljs-keyword">const</span> ThemeContext = React.createContext(<span class="hljs-string">&apos;xxx&apos;</span>)

<span class="hljs-comment">// &#x2461;&#x6CE8;&#x5165;---&#x63D0;&#x4F9B;&#x8005; &#x5728;&#x5165;&#x53E3;&#x6216;&#x8005;&#x4F60;&#x60F3;&#x8981;&#x6CE8;&#x5165;&#x7684;&#x7236;&#x7C7B;&#x4E2D;&#xFF0C;&#x4E14;&#x53EF;&#x4EE5;&#x5D4C;&#x5957;&#xFF0C;&#x91CC;&#x5C42;&#x8986;&#x76D6;&#x5916;&#x5C42;</span>
<span class="hljs-keyword">return</span> (
  &lt;ThemeContext.Provider value=&quot;yyy&quot;&gt;
  {children}
  &lt;ThemeContext.Provider&gt;
)

// &#x2462;&#x4F7F;&#x7528;---&#x6D88;&#x8D39;&#x8005; &#x9700;&#x8981;&#x4F7F;&#x7528;&#x5171;&#x4EAB;&#x6570;&#x636E;&#x7684;&#x5B50;&#x7C7B;&#x4E2D;
// &#x65B9;&#x5F0F;&#x4E00;
static contextType = ThemeContext
// &#x65B9;&#x5F0F;&#x4E8C;
Class.contextType = ThemeContext 
render() {
  let value = this.context
  /* &#x57FA;&#x4E8E;&#x8FD9;&#x4E2A;&#x503C;&#x8FDB;&#x884C;&#x6E32;&#x67D3;&#x5DE5;&#x4F5C; */
}
// &#x65B9;&#x5F0F;&#x4E09;
return(
  &lt;ThemeContext.Consumer&gt;
  { value =&gt; /* &#x57FA;&#x4E8E; context &#x503C;&#x8FDB;&#x884C;&#x6E32;&#x67D3;*/ }
  &lt;/ThemeContext.Consumer&gt;
)
</code></pre>
<p><strong><em>&#x52A8;&#x6001;Context</em></strong>---&#x7C7B;&#x4F3C;&#x7236;&#x5B50;&#x7EC4;&#x4EF6;</p>
<pre><code class="lang-js"><span class="hljs-comment">// &#x2460;&#x521B;&#x5EFA;</span>
<span class="hljs-keyword">const</span> ThemeContext = React.createContext({
  value: <span class="hljs-string">&apos;xxx&apos;</span>,
  changeFunc: () =&gt; {} <span class="hljs-comment">//&#x901A;&#x8FC7;context&#x4F20;&#x9012;&#x8FD9;&#x4E2A;&#x51FD;&#x6570;&#xFF0C;&#x8BA9;consumers&#x7EC4;&#x4EF6;&#x66F4;&#x65B0;context</span>
})
<span class="hljs-comment">// &#x2461;&#x6CE8;&#x5165;</span>
<span class="hljs-keyword">return</span> (
  &lt;ThemeContext.Provider value=&quot;yyy&quot;&gt;
    &lt;Child changeFunc={this.changeFunc}&gt; 
  &lt;ThemeContext.Provider&gt;
)
// &#x2462;&#x6D88;&#x8D39;
return(
  &lt;ThemeContext.Consumer&gt;
  { ({value, changeFunc}) =&gt; /* &#x57FA;&#x4E8E; context &#x503C;&#x8FDB;&#x884C;&#x6E32;&#x67D3;,&#x540C;&#x65F6;&#x628A;changeFunc&#x7ED1;&#x5B9A;*/ }
  &lt;/ThemeContext.Consumer&gt;
)
</code></pre>
<p><strong><em>&#x6D88;&#x8D39;&#x591A;&#x4E2A;Context&#x3001;&#x6CE8;&#x610F;&#x4E8B;&#x9879;&#x7B49;</em></strong><a href="https://zh-hans.reactjs.org/docs/context.html#consuming-multiple-contexts" target="_blank">&#x53C2;&#x8003;React&#x4E2D;&#x6587;&#x7F51;</a></p>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-react&#x8DEF;&#x7531;&#x61D2;&#x52A0;&#x8F7D;&#x7684;&#x5B9E;&#x73B0;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-react&#x8DEF;&#x7531;&#x61D2;&#x52A0;&#x8F7D;&#x7684;&#x5B9E;&#x73B0;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-react&#x8DEF;&#x7531;&#x61D2;&#x52A0;&#x8F7D;&#x7684;&#x5B9E;&#x73B0;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-react&#x8DEF;&#x7531;&#x61D2;&#x52A0;&#x8F7D;&#x7684;&#x5B9E;&#x73B0;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-react&#x8DEF;&#x7531;&#x61D2;&#x52A0;&#x8F7D;&#x7684;&#x5B9E;&#x73B0;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; React&#x8DEF;&#x7531;&#x61D2;&#x52A0;&#x8F7D;&#x7684;&#x5B9E;&#x73B0;</p></h3>
<h5 id="answer_22"><a name="answer_22" class="anchor-navigation-ex-anchor" href="#answer_22"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<ul>
<li><strong><em>&#x539F;&#x7406;</em></strong></li>
</ul>
<blockquote>
<ul>
<li>webpack&#x4EE3;&#x7801;&#x5206;&#x5272;</li>
<li>React&#x5229;&#x7528; React.lazy&#x4E0E;import()&#x5B9E;&#x73B0;&#x4E86;&#x6E32;&#x67D3;&#x65F6;&#x7684;&#x52A8;&#x6001;&#x52A0;&#x8F7D; </li>
<li>&#x5229;&#x7528;Suspense&#x6765;&#x5904;&#x7406;&#x5F02;&#x6B65;&#x52A0;&#x8F7D;&#x8D44;&#x6E90;&#x65F6;&#x9875;&#x9762;&#x5E94;&#x8BE5;&#x5982;&#x4F55;&#x663E;&#x793A;&#x7684;&#x95EE;&#x9898;</li>
</ul>
</blockquote>
<ul>
<li><em>1.React.lazy</em></li>
</ul>
<blockquote>
<ul>
<li>&#x901A;&#x8FC7;lazy() api&#x6765;&#x52A8;&#x6001;import&#x9700;&#x8981;&#x61D2;&#x52A0;&#x8F7D;&#x7684;&#x7EC4;&#x4EF6;</li>
<li>import&#x7684;&#x7EC4;&#x4EF6;&#x76EE;&#x524D;&#x53EA;&#x652F;&#x6301;export default&#x7684;&#x5F62;&#x5F0F;&#x5BFC;&#x51FA;</li>
<li>Suspense&#x6765;&#x5305;&#x88F9;&#x61D2;&#x52A0;&#x8F7D;&#x7684;&#x7EC4;&#x4EF6;&#x8FDB;&#x884C;&#x52A0;&#x8F7D;&#xFF0C;&#x53EF;&#x4EE5;&#x8BBE;&#x7F6E;fallback&#x73B0;&#x5B9E;&#x52A0;&#x8F7D;&#x4E2D;&#x6548;&#x679C;</li>
<li>React.lazy&#x53EF;&#x4EE5;&#x7ED3;&#x5408;Router&#x6765;&#x5BF9;&#x6A21;&#x5757;&#x8FDB;&#x884C;&#x61D2;&#x52A0;&#x8F7D;&#x3002;</li>
</ul>
</blockquote>
<pre><code class="lang-jsx"><span class="hljs-keyword">import</span> { BrowserRouter <span class="hljs-keyword">as</span> Router, Route, Switch } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-router-dom&apos;</span>;
<span class="hljs-keyword">import</span> { Suspense, lazy } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">const</span> Home = lazy(() =&gt; <span class="hljs-keyword">import</span>(<span class="hljs-string">&apos;./routes/Home&apos;</span>))
<span class="hljs-keyword">const</span> AnyComponent = lazy(() =&gt; <span class="hljs-keyword">import</span>(<span class="hljs-string">&apos;./routes/AnyComponent&apos;</span>))

...
return (
  &lt;Router&gt;
    &lt;Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
      &lt;Switch&gt;
        &lt;Route exact path=&quot;/&quot; component={Home}/&gt;
        &lt;Route path=&quot;/anyManage&quot; component={AnyComponent}/&gt;
        ...
      &lt;/Switch&gt;
    &lt;/Suspense&gt;
  &lt;/Router&gt;
</code></pre>
<ul>
<li><em>2.react-loadable</em></li>
</ul>
<blockquote>
<p>react-loadable&#x662F;&#x4EE5;&#x7EC4;&#x4EF6;&#x7EA7;&#x522B;&#x6765;&#x5206;&#x5272;&#x4EE3;&#x7801;&#x7684;&#xFF0C;&#x8FD9;&#x610F;&#x5473;&#x7740;&#xFF0C;&#x6211;&#x4EEC;&#x4E0D;&#x4EC5;&#x53EF;&#x4EE5;&#x6839;&#x636E;&#x8DEF;&#x7531;&#x6309;&#x9700;&#x52A0;&#x8F7D;&#xFF0C;&#x8FD8;&#x53EF;&#x4EE5;&#x6839;&#x636E;&#x7EC4;&#x4EF6;&#x6309;&#x9700;&#x52A0;&#x8F7D;&#xFF0C;&#x4F7F;&#x7528;&#x65B9;&#x5F0F;&#x548C;&#x8DEF;&#x7531;&#x5206;&#x5272;&#x4E00;&#x6837;&#xFF0C;&#x53EA;&#x7528;&#x4FEE;&#x6539;&#x7EC4;&#x4EF6;&#x7684;&#x5F15;&#x5165;&#x65B9;&#x5F0F;&#x5373;&#x53EF;</p>
</blockquote>
<pre><code class="lang-js"><span class="hljs-comment">// &#x8DEF;&#x7531;&#x61D2;&#x52A0;&#x8F7D;&#xFF08;&#x5F02;&#x6B65;&#x7EC4;&#x4EF6;&#xFF09;</span>
<span class="hljs-keyword">import</span> Loadable <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-loadable&apos;</span>;
<span class="hljs-comment">//&#x901A;&#x7528;&#x8FC7;&#x573A;&#x7EC4;&#x4EF6;</span>
<span class="hljs-keyword">const</span> LoadingComponent = () =&gt; {
  <span class="hljs-keyword">return</span> (
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>loading<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
  )
}
...
export <span class="hljs-keyword">default</span> (loader, loading=LoadingComponent) =&gt; {
  <span class="hljs-keyword">return</span> Loadable({
    loader,
    loading
  })
}

<span class="hljs-comment">//Route&#x4E2D;&#x8C03;&#x7528;</span>
<span class="hljs-keyword">import</span> { BrowserRouter, Route } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-router-dom&apos;</span>
<span class="hljs-keyword">const</span> loadable <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./loadable&apos;</span>;
<span class="hljs-keyword">const</span> AnyComponent = loadable(() =&gt; <span class="hljs-keyword">import</span>(<span class="hljs-string">&apos;./AnyComponent&apos;</span>))
<span class="hljs-keyword">const</span> Routes = () =&gt; (
  <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">BrowserRouter</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">&quot;/home&quot;</span> <span class="hljs-attr">component</span>=<span class="hljs-string">{AnyComponent}</span>/&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">BrowserRouter</span>&gt;</span>
);
export default Routes;
</span></code></pre>
<h5 id="&#x4EE5;&#x4E0B;&#x662F;&#x8001;&#x7248;&#x4E2D;&#x7684;&#x65B9;&#x6CD5;"><a name="&#x4EE5;&#x4E0B;&#x662F;&#x8001;&#x7248;&#x4E2D;&#x7684;&#x65B9;&#x6CD5;" class="anchor-navigation-ex-anchor" href="#&#x4EE5;&#x4E0B;&#x662F;&#x8001;&#x7248;&#x4E2D;&#x7684;&#x65B9;&#x6CD5;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x4EE5;&#x4E0B;&#x662F;&#x8001;&#x7248;&#x4E2D;&#x7684;&#x65B9;&#x6CD5;" class="plugin-anchor" href="#&#x4EE5;&#x4E0B;&#x662F;&#x8001;&#x7248;&#x4E2D;&#x7684;&#x65B9;&#x6CD5;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x4EE5;&#x4E0B;&#x662F;&#x8001;&#x7248;&#x4E2D;&#x7684;&#x65B9;&#x6CD5;</h5>
<ul>
<li><em>3.webpack&#x914D;&#x7F6E;&#x4E2D;&#x4F7F;&#x7528;lazyload-loader</em></li>
</ul>
<pre><code class="lang-js"><span class="hljs-comment">// webpack &#x914D;&#x7F6E;&#x4E2D;</span>
<span class="hljs-built_in">module</span>: {
 rules: [
 {
 test: <span class="hljs-regexp">/.(js|jsx)$/</span>,,
 use: [
 <span class="hljs-string">&apos;babel-loader&apos;</span>,
 <span class="hljs-string">&apos;lazyload-loader&apos;</span>
 ]
},

<span class="hljs-comment">// &#x4E1A;&#x52A1;&#x4EE3;&#x7801;&#x4E2D;</span>
<span class="hljs-comment">// &#x4F7F;&#x7528;lazy! &#x524D;&#x7F00; &#x4EE3;&#x8868;&#x9700;&#x8981;&#x61D2;&#x52A0;&#x8F7D;&#x7684;Router</span>
 <span class="hljs-keyword">import</span> Shop <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;lazy!./src/view/Shop&apos;</span>;
 <span class="hljs-comment">// Router &#x6B63;&#x5E38;&#x4F7F;&#x7528;</span>
 &lt;Route path=<span class="hljs-string">&quot;/shop&quot;</span> component={Shop} /&gt;
</code></pre>
<ul>
<li><em>4.import()</em> webpack v2+</li>
</ul>
<blockquote>
<p>&#x7B26;&#x5408;ECMAScript&#x63D0;&#x8BAE;&#x7684;import()&#x8BED;&#x6CD5;&#xFF0C;&#x8BE5;&#x63D0;&#x6848;&#x4E0E;&#x666E;&#x901A; import &#x8BED;&#x53E5;&#x6216; require &#x51FD;&#x6570;&#x7684;&#x7C7B;&#x4F3C;&#xFF0C;&#x4F46;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A; Promise &#x5BF9;&#x8C61;</p>
</blockquote>
<pre><code class="lang-js"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">component</span>(<span class="hljs-params"></span>) </span>{
 <span class="hljs-keyword">return</span> <span class="hljs-keyword">import</span>( <span class="hljs-comment">/* webpackChunkName: &quot;lodash&quot; */</span> <span class="hljs-string">&apos;lodash&apos;</span>).then(_ =&gt; {
 <span class="hljs-keyword">var</span> element = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&apos;div&apos;</span>);
 element.innerHTML = _.join([<span class="hljs-string">&apos;Hello&apos;</span>, <span class="hljs-string">&apos;webpack&apos;</span>], <span class="hljs-string">&apos; &apos;</span>);
 <span class="hljs-keyword">return</span> element;
 }).catch(error =&gt; <span class="hljs-string">&apos;An error occurred while loading the component&apos;</span>);
}
<span class="hljs-comment">// &#x6216;&#x8005;&#x4F7F;&#x7528;async</span>
<span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getComponent</span>(<span class="hljs-params"></span>) </span>{
 <span class="hljs-keyword">var</span> element = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&apos;div&apos;</span>);
 <span class="hljs-keyword">const</span> _ = <span class="hljs-keyword">await</span> <span class="hljs-keyword">import</span>(<span class="hljs-comment">/* webpackChunkName: &quot;lodash&quot; */</span> <span class="hljs-string">&apos;lodash&apos;</span>);
 element.innerHTML = _.join([<span class="hljs-string">&apos;Hello&apos;</span>, <span class="hljs-string">&apos;webpack&apos;</span>], <span class="hljs-string">&apos; &apos;</span>);
 <span class="hljs-keyword">return</span> element;
}
</code></pre>
<ul>
<li><em>5.requre.ensure</em> webpack v1 v2 </li>
</ul>
<pre><code class="lang-js"><span class="hljs-built_in">require</span>.ensure([], <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">require</span>)</span>{
 <span class="hljs-keyword">var</span> list = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./list&apos;</span>);
 list.show();
&#xFF0C;<span class="hljs-string">&apos;list&apos;</span>);
&lt;!-- Router --&gt;
const Foo = require.ensure([], () =&gt; {
 require(&quot;Foo&quot;);
}, err =&gt; {
 console.error(&quot;We failed to load chunk: &quot; + err);
}, &quot;chunk-name&quot;);
//react-router2 or 3
&lt;Route path=&quot;/foo&quot; getComponent={Foo} /&gt;
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-react-router-dom&#x5185;&#x90E8;&#x662F;&#x600E;&#x4E48;&#x6837;&#x5B9E;&#x73B0;&#x7684;&#xFF0C;&#x600E;&#x4E48;&#x505A;&#x8DEF;&#x7531;&#x5B88;&#x536B;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-react-router-dom&#x5185;&#x90E8;&#x662F;&#x600E;&#x4E48;&#x6837;&#x5B9E;&#x73B0;&#x7684;&#xFF0C;&#x600E;&#x4E48;&#x505A;&#x8DEF;&#x7531;&#x5B88;&#x536B;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-react-router-dom&#x5185;&#x90E8;&#x662F;&#x600E;&#x4E48;&#x6837;&#x5B9E;&#x73B0;&#x7684;&#xFF0C;&#x600E;&#x4E48;&#x505A;&#x8DEF;&#x7531;&#x5B88;&#x536B;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-react-router-dom&#x5185;&#x90E8;&#x662F;&#x600E;&#x4E48;&#x6837;&#x5B9E;&#x73B0;&#x7684;&#xFF0C;&#x600E;&#x4E48;&#x505A;&#x8DEF;&#x7531;&#x5B88;&#x536B;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-react-router-dom&#x5185;&#x90E8;&#x662F;&#x600E;&#x4E48;&#x6837;&#x5B9E;&#x73B0;&#x7684;&#xFF0C;&#x600E;&#x4E48;&#x505A;&#x8DEF;&#x7531;&#x5B88;&#x536B;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; React-router-dom&#x5185;&#x90E8;&#x662F;&#x600E;&#x4E48;&#x6837;&#x5B9E;&#x73B0;&#x7684;&#xFF0C;&#x600E;&#x4E48;&#x505A;&#x8DEF;&#x7531;&#x5B88;&#x536B;&#xFF1F;</p></h3>
<h5 id="answer_23"><a name="answer_23" class="anchor-navigation-ex-anchor" href="#answer_23"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<h5 id="&#x5185;&#x90E8;&#x5B9E;&#x73B0;"><a name="&#x5185;&#x90E8;&#x5B9E;&#x73B0;" class="anchor-navigation-ex-anchor" href="#&#x5185;&#x90E8;&#x5B9E;&#x73B0;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x5185;&#x90E8;&#x5B9E;&#x73B0;" class="plugin-anchor" href="#&#x5185;&#x90E8;&#x5B9E;&#x73B0;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x5185;&#x90E8;&#x5B9E;&#x73B0;</h5>
<ul>
<li>&#x603B;</li>
</ul>
<blockquote>
<p>react-router-dom&#x5229;&#x7528;&#x4E86;Context API&#xFF0C;&#x901A;&#x8FC7;&#x4E0A;&#x4E0B;&#x6587;&#x5BF9;&#x8C61;&#x5C06;&#x5F53;&#x524D;&#x8DEF;&#x7531;&#x4FE1;&#x606F;&#x5BF9;&#x8C61;&#x6CE8;&#x5165;&#x5230;  <em>Router</em> &#x7EC4;&#x4EF6;&#x4E2D;&#xFF0C;&#x6240;&#x4EE5; <em>Router</em> &#x7EC4;&#x4EF6;&#x4E2D; <em>render()</em> &#x6E32;&#x67D3;&#x7684;&#x5185;&#x5BB9;&#x5C31;&#x662F; <em>ContextAPI</em> &#x63D0;&#x4F9B;&#x7684; <em>Provider</em> &#x7EC4;&#x4EF6;&#xFF0C;&#x7136;&#x540E;&#x63A5;&#x6536; <em>Router</em> &#x7EC4;&#x4EF6;&#x4E2D;&#x7684;&#x5F53;&#x524D;&#x8DEF;&#x7531;&#x4FE1;&#x606F;&#x5BF9;&#x8C61;&#x3002;
&#x8FD9;&#x6837; <em>Router</em> &#x7EC4;&#x4EF6;&#x4E0B;&#x7684;&#x6240;&#x6709;&#x7EC4;&#x4EF6;&#x90FD;&#x80FD;&#x901A;&#x8FC7;&#x4E0A;&#x4E0B;&#x6587;&#x62FF;&#x5230;&#x5F53;&#x524D;&#x8DEF;&#x7531;&#x4FE1;&#x606F;&#x5BF9;&#x8C61;&#xFF0C;&#x5373;&#x5176;&#x4E2D;&#x7684;<em>Switch</em> &#x3001; <em>Route</em> &#x3001; <em>Link</em> &#x3001;<em>Redirect</em> &#x7B49;&#x7EC4;&#x4EF6;&#x90FD;&#x53EF;&#x4EE5;&#x62FF;&#x5230;&#x5F53;&#x524D;&#x8DEF;&#x7531;&#x4FE1;&#x606F;&#x5BF9;&#x8C61;&#xFF0C;&#x7136;&#x540E;&#x901A;&#x8FC7;&#x6539;&#x53D8;&#x5F53;&#x524D;&#x8DEF;&#x7531;&#x4FE1;&#x606F;&#x6765;&#x5B9E;&#x73B0;&#x52A8;&#x6001;&#x5207;&#x6362; <em>Route</em> &#x7EC4;&#x4EF6;&#x7684;&#x6E32;&#x67D3;&#x3002;</p>
</blockquote>
<ul>
<li>&#x5206;</li>
</ul>
<blockquote>
<ul>
<li>RouterContext&#xFF1A;react-router&#x4F7F;&#x7528;context&#x5B9E;&#x73B0;&#x8DE8;&#x7EC4;&#x4EF6;&#x95F4;&#x6570;&#x636E;&#x4F20;&#x9012;&#xFF0C;&#x6240;&#x4EE5;react-router&#x5B9A;&#x4E49;&#x4E86;&#x4E00;&#x4E2A;routerContext&#x4F5C;&#x4E3A;&#x6570;&#x636E;&#x6E90;&#xFF0C;</li>
<li>Router&#xFF1A;BrowserRouter&#x548C;HashRouter&#x5C06;&#x5F53;&#x524D;&#x8DEF;&#x7531;&#x6CE8;&#x5165;&#x5230;&#x4E0A;&#x4E0B;&#x6587;&#x4E2D;&#xFF0C;&#x540C;&#x65F6;&#x8DEF;&#x7531;&#x4FE1;&#x606F;&#x5305;&#x542B;location&#x3001;match&#x3001;history</li>
<li>Route&#xFF1A;&#x8DEF;&#x7531;&#x89C4;&#x5219;&#xFF0C;&#x83B7;&#x53D6;RouterContext&#x7684;&#x4FE1;&#x606F;(location&#x5BF9;&#x8C61;)&#xFF0C;&#x83B7;&#x53D6;path&#x548C;component&#x5C5E;&#x6027;&#xFF0C;&#x5224;&#x65AD;path&#x548C;&#x5F53;&#x524D;&#x7684;location&#x662F;&#x5426;&#x5339;&#x914D;&#xFF0C;&#x5982;&#x679C;&#x5339;&#x914D;&#xFF0C;&#x5219;&#x6E32;&#x67D3;component&#xFF0C;&#x5426;&#x5219;&#x8FD4;&#x56DE;null&#xFF0C;&#x4E0D;&#x6E32;&#x67D3;&#x4EFB;&#x4F55;&#x5185;&#x5BB9;</li>
<li>Switch&#xFF1A;&#x904D;&#x5386;&#x6240;&#x6709;&#x5B50;&#x5143;&#x7D20;(Route)&#xFF0C;&#x5224;&#x65AD;Route&#x7684;path&#x548C;location&#x662F;&#x5426;&#x5339;&#x914D;&#xFF0C;&#x5982;&#x679C;&#x5339;&#x914D;&#xFF0C;&#x5219;&#x6E32;&#x67D3;&#xFF0C;&#x5426;&#x5219;&#x4E0D;&#x6E32;&#x67D3;</li>
<li>Redireact&#xFF1A;&#x672A;&#x80FD;&#x914D;&#x5219;&#x91CD;&#x5B9A;&#x5411;&#x5230;&#x6307;&#x5B9A;&#x9875;&#x9762;</li>
<li>Link/NavLink: Link&#x7EC4;&#x4EF6;&#x672C;&#x8D28;&#x5C31;&#x662F;a&#x6807;&#x7B7E;&#xFF0C;&#x5B83;&#x4FEE;&#x6539;&#x4E86;a&#x6807;&#x7B7E;&#x7684;&#x9ED8;&#x8BA4;&#x884C;&#x4E3A;&#xFF0C;&#x5F53;&#x70B9;&#x51FB;Link&#x65F6;&#xFF0C;&#x4F1A;&#x5BFC;&#x822A;&#x5230;&#x5BF9;&#x5E94;&#x7684;&#x8DEF;&#x7531;&#xFF0C;&#x5BFC;&#x81F4;locaiton&#x5BF9;&#x8C61;&#x7684;&#x6539;&#x53D8;&#xFF0C;&#x51FA;&#x53D1;&#x7EC4;&#x4EF6;&#x7684;&#x66F4;&#x65B0;</li>
<li>withRouter&#xFF1A;&#x5BF9;&#x4F20;&#x5165;&#x7684;&#x7EC4;&#x4EF6;&#x8FDB;&#x884C;&#x52A0;&#x5F3A;&#xFF0C;&#x529F;&#x80FD;&#x5C31;&#x662F;&#x83B7;&#x53D6;routerContext&#x4E0A;&#x9762;&#x7684;&#x4FE1;&#x606F;&#xFF0C;&#x7136;&#x540E;&#x4F5C;&#x4E3A;props&#x4F20;&#x7ED9;&#x9700;&#x8981;&#x52A0;&#x5F3A;&#x7684;&#x7EC4;&#x4EF6;</li>
</ul>
</blockquote>
<h5 id="&#x600E;&#x4E48;&#x505A;&#x8DEF;&#x7531;&#x5B88;&#x536B;"><a name="&#x600E;&#x4E48;&#x505A;&#x8DEF;&#x7531;&#x5B88;&#x536B;" class="anchor-navigation-ex-anchor" href="#&#x600E;&#x4E48;&#x505A;&#x8DEF;&#x7531;&#x5B88;&#x536B;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x600E;&#x4E48;&#x505A;&#x8DEF;&#x7531;&#x5B88;&#x536B;" class="plugin-anchor" href="#&#x600E;&#x4E48;&#x505A;&#x8DEF;&#x7531;&#x5B88;&#x536B;"><i class="fa fa-link" aria-hidden="true"></i></a>&#x600E;&#x4E48;&#x505A;&#x8DEF;&#x7531;&#x5B88;&#x536B;</h5>
<ul>
<li>&#x8DEF;&#x7531;&#x91CC;&#x8BBE;&#x7F6E;meta&#x5143;&#x5B57;&#x7B26;&#x5B9E;&#x73B0;&#x8DEF;&#x7531;&#x62E6;&#x622A; </li>
</ul>
<blockquote>
<ul>
<li>React Router 4.0&#x4E4B;&#x524D;&#x4E5F;&#x50CF;vue&#x4E2D;&#x4E00;&#x6837;&#x6709;&#x4E2A;&#x94A9;&#x5B50;&#x51FD;&#x6570; <em>onEnter</em> &#x53EF;&#x5B9E;&#x73B0;</li>
<li>ReactRouter 4.0&#x5F00;&#x59CB;&#x81EA;&#x5DF1;&#x5B9E;&#x73B0;&#x5982;&#x4E0B;</li>
</ul>
</blockquote>
<pre><code class="lang-js"><span class="hljs-comment">// routerMap.js&#x4E2D;</span>
<span class="hljs-keyword">import</span> Index <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./page/index&apos;</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> [
  { path:<span class="hljs-string">&apos;/&apos;</span>, name: <span class="hljs-string">&apos;App&apos;</span>, component:Index, auth: <span class="hljs-literal">true</span> },
  ...
]

<span class="hljs-comment">//&#x5165;&#x53E3;&#x6587;&#x4EF6; app.js&#x4E2D;</span>
<span class="hljs-keyword">import</span> { BrowserRouter <span class="hljs-keyword">as</span> Router, Switch } <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;react-router-dom&quot;</span>;
<span class="hljs-keyword">import</span> FrontendAuth <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./FrontendAuth&quot;</span>;
<span class="hljs-keyword">import</span> routerMap <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;./routerMap&quot;</span>;
...

return (
  &lt;Router&gt;
    &lt;div&gt;
      &lt;Switch&gt;
        &lt;FrontendAuth routerConfig={routerMap} /&gt;
      &lt;/Switch&gt;
    &lt;/div&gt;
  &lt;/Router&gt;
)

// &#x9AD8;&#x9636;&#x7EC4;&#x4EF6;FrontendAuth &#x5904;&#x7406;&#x8DEF;&#x7531;&#x8DF3;&#x8F6C;&#xFF0C;&#x5373;&#x8DEF;&#x7531;&#x5B88;&#x536B;&#x529F;&#x80FD;

//FrontendAuth.js
import React, { Component } from &quot;react&quot;;
import { Route, Redirect } from &quot;react-router-dom&quot;;
class FrontendAuth extends Component {
  // eslint-disable-next-line no-useless-constructor
  constructor(props) {
    super(props);
  }
  render() {
    const { routerConfig, location } = this.props;
    const { pathname } = location;
    const isLogin = sessionStorage.getItem(&quot;username&quot;);
    console.log(pathname, isLogin);
    console.log(location);
    // &#x5982;&#x679C;&#x8BE5;&#x8DEF;&#x7531;&#x4E0D;&#x7528;&#x8FDB;&#x884C;&#x6743;&#x9650;&#x6821;&#x9A8C;&#xFF0C;&#x767B;&#x5F55;&#x72B6;&#x6001;&#x4E0B;&#x767B;&#x9646;&#x9875;&#x9664;&#x5916;
    // &#x56E0;&#x4E3A;&#x767B;&#x9646;&#x540E;&#xFF0C;&#x65E0;&#x6CD5;&#x8DF3;&#x8F6C;&#x5230;&#x767B;&#x9646;&#x9875;
    // &#x8FD9;&#x90E8;&#x5206;&#x4EE3;&#x7801;&#xFF0C;&#x662F;&#x4E3A;&#x4E86;&#x5728;&#x975E;&#x767B;&#x9646;&#x72B6;&#x6001;&#x4E0B;&#xFF0C;&#x8BBF;&#x95EE;&#x4E0D;&#x9700;&#x8981;&#x6743;&#x9650;&#x6821;&#x9A8C;&#x7684;&#x8DEF;&#x7531;
    const targetRouterConfig = routerConfig.find(
      (item) =&gt; item.path === pathname
    );
    console.log(targetRouterConfig);
    if (targetRouterConfig &amp;&amp; !targetRouterConfig.auth &amp;&amp; !isLogin) {
      const { component } = targetRouterConfig;
      return &lt;Route exact path={pathname} component={component} /&gt;;
    }
    if (isLogin) {
      // &#x5982;&#x679C;&#x662F;&#x767B;&#x9646;&#x72B6;&#x6001;&#xFF0C;&#x60F3;&#x8981;&#x8DF3;&#x8F6C;&#x5230;&#x767B;&#x9646;&#xFF0C;&#x91CD;&#x5B9A;&#x5411;&#x5230;&#x4E3B;&#x9875;
      if (pathname === &quot;/login&quot;) {
        return &lt;Redirect to=&quot;/&quot; /&gt;;
      } else {
        // &#x5982;&#x679C;&#x8DEF;&#x7531;&#x5408;&#x6CD5;&#xFF0C;&#x5C31;&#x8DF3;&#x8F6C;&#x5230;&#x76F8;&#x5E94;&#x7684;&#x8DEF;&#x7531;
        if (targetRouterConfig) {
          return (
            &lt;Route path={pathname} component={targetRouterConfig.component} /&gt;
          );
        } else {
          // &#x5982;&#x679C;&#x8DEF;&#x7531;&#x4E0D;&#x5408;&#x6CD5;&#xFF0C;&#x91CD;&#x5B9A;&#x5411;&#x5230; 404 &#x9875;&#x9762;
          return &lt;Redirect to=&quot;/404&quot; /&gt;;
        }
      }
    } else {
      // &#x975E;&#x767B;&#x9646;&#x72B6;&#x6001;&#x4E0B;&#xFF0C;&#x5F53;&#x8DEF;&#x7531;&#x5408;&#x6CD5;&#x65F6;&#x4E14;&#x9700;&#x8981;&#x6743;&#x9650;&#x6821;&#x9A8C;&#x65F6;&#xFF0C;&#x8DF3;&#x8F6C;&#x5230;&#x767B;&#x9646;&#x9875;&#x9762;&#xFF0C;&#x8981;&#x6C42;&#x767B;&#x9646;
      if (targetRouterConfig &amp;&amp; targetRouterConfig.auth) {
        return &lt;Redirect to=&quot;/login&quot; /&gt;;
      } else {
        // &#x975E;&#x767B;&#x9646;&#x72B6;&#x6001;&#x4E0B;&#xFF0C;&#x8DEF;&#x7531;&#x4E0D;&#x5408;&#x6CD5;&#x65F6;&#xFF0C;&#x91CD;&#x5B9A;&#x5411;&#x81F3; 404
        return &lt;Redirect to=&quot;/404&quot; /&gt;;
      }
    }
  }
}
export default FrontendAuth;
</code></pre>
<ul>
<li>&#x603B;&#x7ED3;&#x4E00;&#x4E0B;&#xFF0C;&#x5B9E;&#x73B0;&#x8DEF;&#x7531;&#x5B88;&#x536B;&#x9700;&#x8981;&#x8003;&#x8651;&#x5230;&#x4EE5;&#x4E0B;&#x7684;&#x95EE;&#x9898;&#xFF1A;</li>
</ul>
<blockquote>
<ul>
<li>&#x672A;&#x767B;&#x5F55;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x8BBF;&#x95EE;&#x4E0D;&#x9700;&#x8981;&#x6743;&#x9650;&#x6821;&#x9A8C;&#x7684;&#x5408;&#x6CD5;&#x9875;&#x9762;&#xFF1A;&#x5141;&#x8BB8;&#x8BBF;&#x95EE;</li>
<li>&#x672A;&#x767B;&#x5F55;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x8BBF;&#x95EE;&#x9700;&#x8981;&#x6743;&#x9650;&#x6821;&#x9A8C;&#x7684;&#x9875;&#x9762;&#xFF1A;&#x7981;&#x6B62;&#x8BBF;&#x95EE;&#xFF0C;&#x8DF3;&#x8F6C;&#x81F3;&#x767B;&#x9646;&#x9875;</li>
<li>&#x672A;&#x767B;&#x5F55;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x8BBF;&#x95EE;&#x6240;&#x6709;&#x7684;&#x975E;&#x6CD5;&#x9875;&#x9762;&#xFF1A;&#x7981;&#x6B62;&#x8BBF;&#x95EE;&#xFF0C;&#x8DF3;&#x8F6C;&#x81F3; 404</li>
<li>&#x767B;&#x9646;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x8BBF;&#x95EE;&#x767B;&#x9646;&#x9875;&#x9762;&#xFF1A;&#x7981;&#x6B62;&#x8BBF;&#x95EE;&#xFF0C;&#x8DF3;&#x8F6C;&#x81F3;&#x4E3B;&#x9875;</li>
<li>&#x767B;&#x9646;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x8BBF;&#x95EE;&#x9664;&#x767B;&#x9646;&#x9875;&#x4EE5;&#x5916;&#x7684;&#x5408;&#x6CD5;&#x9875;&#x9762;&#xFF1A;&#x5141;&#x8BB8;&#x8BBF;&#x95EE;</li>
<li>&#x767B;&#x9646;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x8BBF;&#x95EE;&#x6240;&#x6709;&#x7684;&#x975E;&#x6CD5;&#x9875;&#x9762;&#xFF1A;&#x7981;&#x6B62;&#x8BBF;&#x95EE;&#xFF0C;&#x8DF3;&#x8F6C;&#x81F3; 404</li>
</ul>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-redux&#x4E2D;sages&#x548C;thunk&#x4E2D;&#x95F4;&#x4EF6;&#x7684;&#x533A;&#x522B;&#xFF0C;&#x4F18;&#x7F3A;&#x70B9;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-redux&#x4E2D;sages&#x548C;thunk&#x4E2D;&#x95F4;&#x4EF6;&#x7684;&#x533A;&#x522B;&#xFF0C;&#x4F18;&#x7F3A;&#x70B9;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-redux&#x4E2D;sages&#x548C;thunk&#x4E2D;&#x95F4;&#x4EF6;&#x7684;&#x533A;&#x522B;&#xFF0C;&#x4F18;&#x7F3A;&#x70B9;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-redux&#x4E2D;sages&#x548C;thunk&#x4E2D;&#x95F4;&#x4EF6;&#x7684;&#x533A;&#x522B;&#xFF0C;&#x4F18;&#x7F3A;&#x70B9;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-redux&#x4E2D;sages&#x548C;thunk&#x4E2D;&#x95F4;&#x4EF6;&#x7684;&#x533A;&#x522B;&#xFF0C;&#x4F18;&#x7F3A;&#x70B9;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; redux&#x4E2D;sages&#x548C;thunk&#x4E2D;&#x95F4;&#x4EF6;&#x7684;&#x533A;&#x522B;&#xFF0C;&#x4F18;&#x7F3A;&#x70B9;</p></h3>
<h5 id="answer_24"><a name="answer_24" class="anchor-navigation-ex-anchor" href="#answer_24"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<ul>
<li>&#x533A;&#x522B;</li>
</ul>
<blockquote>
<ul>
<li>redux-thunk&#x5F02;&#x6B65;&#x91C7;&#x53D6; async/await redux-saga&#x91C7;&#x53D6;generate&#x51FD;&#x6570;</li>
</ul>
</blockquote>
<ul>
<li>&#x4F18;&#x7F3A;&#x70B9;</li>
</ul>
<blockquote>
<ul>
<li>redux-thunk</li>
</ul>
<blockquote>
<p>&#x4F18;&#x70B9;&#xFF1A; &#x5E93;&#x5C0F;&#xFF0C;&#x4EE3;&#x7801;&#x5C31;&#x51E0;&#x884C;
&#x7F3A;&#x70B9;&#xFF1A;&#x4EE3;&#x7801;&#x81C3;&#x80BF;&#xFF0C;reducer&#x4E0D;&#x518D;&#x662F;&#x7EAF;&#x7CB9;&#x51FD;&#x6570;&#xFF0C;&#x76F4;&#x63A5;&#x8FD4;&#x56DE;&#x5BF9;&#x8C61;&#xFF0C;&#x8FDD;&#x80CC;&#x4E86;&#x5F53;&#x521D;&#x7684;&#x8BBE;&#x8BA1;&#x539F;&#x5219;&#xFF1B;action&#x7684;&#x5F62;&#x5F0F;&#x4E0D;&#x7EDF;&#x4E00;&#xFF0C;&#x5F02;&#x6B65;&#x64CD;&#x4F5C;&#x592A;&#x4E3A;&#x5206;&#x6563;&#xFF0C;&#x5206;&#x6563;&#x5728;&#x4E86;&#x5404;&#x4E2A;action&#x4E2D;</p>
</blockquote>
<ul>
<li>redux-saga</li>
</ul>
<blockquote>
<p>&#x4F18;&#x70B9;&#xFF1A; &#x5C06;&#x5F02;&#x6B65;&#x4E0E;reducer&#x533A;&#x5206;&#x5F00;&#x4E86;&#xFF0C;&#x66F4;&#x52A0;&#x4F18;&#x96C5;&#xFF0C;&#x9002;&#x5408;&#x5927;&#x91CF;APi&#x8BF7;&#x6C42;&#xFF0C;&#x800C;&#x4E14;&#x6BCF;&#x4E2A;&#x8BF7;&#x6C42;&#x4E4B;&#x95F4;&#x5B58;&#x5728;&#x590D;&#x6742;&#x7684;&#x4EE5;&#x6765;&#x5173;&#x7CFB;
&#x7F3A;&#x70B9;&#xFF1A;&#x5B66;&#x4E60;&#x66F2;&#x7EBF;&#x6BD4;&#x8F83;&#x9661;&#xFF0C;&#x7406;&#x89E3;async await&#xFF1B;&#x800C;&#x4E14;&#x5E93;&#x4E5F;&#x6BD4;&#x8F83;&#x5927;&#xFF0C;&#x5373;&#x4F7F;&#x53D1;&#x5E03;&#x7684;&#x6700;&#x5C0F;&#x4E5F;&#x6709;25kb,gzip&#x538B;&#x7F29;&#x540E;&#x4E5F;&#x6709;7KB,React&#x538B;&#x7F29;&#x540E;&#x624D;45kb</p>
</blockquote>
</blockquote>
<h3 id="&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x8BF4;react&#x662F;view&#xFF08;&#x89C6;&#x56FE;&#x5C42;&#xFF09;"><a name="&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x8BF4;react&#x662F;view&#xFF08;&#x89C6;&#x56FE;&#x5C42;&#xFF09;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x8BF4;react&#x662F;view&#xFF08;&#x89C6;&#x56FE;&#x5C42;&#xFF09;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x8BF4;react&#x662F;view&#xFF08;&#x89C6;&#x56FE;&#x5C42;&#xFF09;" class="plugin-anchor" href="#&#x2605;&#x2605;-&#x4E3A;&#x4EC0;&#x4E48;&#x8BF4;react&#x662F;view&#xFF08;&#x89C6;&#x56FE;&#x5C42;&#xFF09;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605; &#x4E3A;&#x4EC0;&#x4E48;&#x8BF4;React&#x662F;view&#xFF08;&#x89C6;&#x56FE;&#x5C42;&#xFF09;</p></h3>
<h5 id="answer_25"><a name="answer_25" class="anchor-navigation-ex-anchor" href="#answer_25"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<blockquote>
<ul>
<li>react, &#x662F; Facebook &#x63A8;&#x51FA;&#x7684;&#x4E00;&#x4E2A;&#x7528;&#x6765;&#x6784;&#x5EFA;&#x7528;&#x6237;&#x754C;&#x9762;&#x7684; JavaScript &#x5E93;. React &#x4E3B;&#x8981;&#x7528;&#x4E8E;&#x6784;&#x5EFA; UI</li>
<li>React&#x88AB;&#x8BA4;&#x4E3A;&#x662F;&#x89C6;&#x56FE;&#x5C42;&#x7684;&#x6846;&#x67B6;&#x662F;&#x56E0;&#x4E3A;&#x5B83;&#x662F;&#x57FA;&#x4E8E;&#x7EC4;&#x4EF6;&#x7684;&#xFF0C;&#x4E00;&#x5207;&#x90FD;&#x662F;&#x7EC4;&#x4EF6;&#xFF0C;&#x800C;&#x7EC4;&#x4EF6;&#x5C31;&#x662F;&#x6E32;&#x67D3;&#x9875;&#x9762;&#x7684;&#x57FA;&#x7840;&#x3002;&#x4E0D;&#x8BBA;&#x7EC4;&#x4EF6;&#x4E2D;&#x5305;&#x542B;&#x7684;jsx&#xFF0C;methods&#xFF0C;state&#xFF0C;props&#xFF0C;&#x90FD;&#x662F;&#x5C5E;&#x4E8E;&#x7EC4;&#x4EF6;&#x5185;&#x90E8;&#x7684;</li>
<li>View&#xFF08;&#x89C6;&#x56FE;&#xFF09;&#x662F;&#x5E94;&#x7528;&#x7A0B;&#x5E8F;&#x4E2D;&#x5904;&#x7406;&#x6570;&#x636E;&#x663E;&#x793A;&#x7684;&#x90E8;&#x5206;&#x3002;&#x89C6;&#x56FE;&#x5C42;&#x4E3B;&#x8981;&#x5305;&#x62EC;&#x4E8C;&#x4E2A;&#x90E8;&#x5206;&#xFF1A;1.&#x89C6;&#x56FE;&#x5C42;&#x663E;&#x793A;&#x53CA;&#x4EA4;&#x4E92;&#x903B;&#x8F91;&#xFF1B;2.&#x89C6;&#x56FE;&#x5C42;&#x7684;&#x6570;&#x636E;&#x7ED3;&#x6784;ViewObj&#xFF0C; &#x5305;&#x62EC;React&#x4E2D;&#x7684;props&#x548C;stats&#xFF1B; </li>
</ul>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x600E;&#x4E48;&#x7528;useeffect&#x6A21;&#x62DF;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-&#x600E;&#x4E48;&#x7528;useeffect&#x6A21;&#x62DF;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x600E;&#x4E48;&#x7528;useeffect&#x6A21;&#x62DF;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x600E;&#x4E48;&#x7528;useeffect&#x6A21;&#x62DF;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x600E;&#x4E48;&#x7528;useeffect&#x6A21;&#x62DF;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x600E;&#x4E48;&#x7528;useEffect&#x6A21;&#x62DF;&#x751F;&#x547D;&#x5468;&#x671F;&#x51FD;&#x6570;&#xFF1F;</p></h3>
<p><a href="https://react.docschina.org/docs/hooks-effect.html" target="_blank">useEffect</a></p>
<h6 id="answer_26"><a name="answer_26" class="anchor-navigation-ex-anchor" href="#answer_26"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h6>
<blockquote>
<ul>
<li>&#x2460;&#x9ED8;&#x8BA4;&#x60C5;&#x51B5;&#x4E0B;&#xFF0C;&#x5B83;&#x5728;&#x7B2C;&#x4E00;&#x6B21;&#x6E32;&#x67D3;&#x4E4B;&#x540E;&#x548C;&#x6BCF;&#x6B21;&#x66F4;&#x65B0;&#x4E4B;&#x540E;&#x90FD;&#x4F1A;&#x6267;&#x884C;&#xFF0C;&#x65E0;&#x9700;&#x6E05;&#x9664;&#x7684;effect</li>
</ul>
</blockquote>
<pre><code class="lang-js"><span class="hljs-comment">// &#x5728;&#x51FD;&#x6570;&#x5F0F;&#x7EC4;&#x4EF6;&#x4E2D; &#x5728; return&#x4E4B;&#x524D;</span>
<span class="hljs-comment">// Similar to componentDidMount and componentDidUpdate:</span>
  useEffect(() =&gt; {
    <span class="hljs-comment">// Update the document title using the browser API</span>
    <span class="hljs-built_in">document</span>.title = <span class="hljs-string">`You clicked <span class="hljs-subst">${count}</span> times`</span>;
  });
</code></pre>
<blockquote>
<ul>
<li>&#x2461;&#x9700;&#x8981;&#x6E05;&#x9664;&#x7684;effect&#xFF1A;React &#x4F1A;&#x5728;&#x7EC4;&#x4EF6;&#x5378;&#x8F7D;&#x7684;&#x65F6;&#x5019;&#x6267;&#x884C;&#x6E05;&#x9664;&#x64CD;&#x4F5C;</li>
</ul>
</blockquote>
<pre><code class="lang-js"> useEffect(() =&gt; {
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">handleStatusChange</span>(<span class="hljs-params">status</span>) </span>{
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    <span class="hljs-comment">// Specify how to clean up after this effect:</span>
    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">cleanup</span>(<span class="hljs-params"></span>) </span>{
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
</code></pre>
<blockquote>
<ul>
<li>&#x2462;&#x4F7F;&#x7528;&#x591A;&#x4E2A;effect&#x5B9E;&#x73B0;&#x5173;&#x6CE8;&#x70B9;&#x7684;&#x5206;&#x79BB;</li>
</ul>
<blockquote>
<p>&#x628A;&#x7C7B;&#x7EC4;&#x4EF6;&#x4E2D;&#x7684;&#x5206;&#x6563;&#x5728;&#x591A;&#x4E2A;&#x751F;&#x547D;&#x5468;&#x671F;&#x4E2D;&#x7684;&#x540C;&#x4E00;&#x4EF6;&#x4E8B;&#x4EF6;&#x7684;&#x5904;&#x7406;&#xFF0C;&#x5408;&#x5E76;&#x5230;&#x540C;&#x4E00;&#x4E2A;effect&#x4E2D;&#x5904;&#x7406;</p>
</blockquote>
<ul>
<li>&#x2463;&#x901A;&#x8FC7;&#x8DF3;&#x8FC7;effect&#x8FDB;&#x884C;&#x6027;&#x80FD;&#x4F18;&#x5316;</li>
</ul>
</blockquote>
<pre><code class="lang-js">useEffect(() =&gt; {
  <span class="hljs-built_in">document</span>.title = <span class="hljs-string">`You clicked <span class="hljs-subst">${count}</span> times`</span>;
}, [count]); <span class="hljs-comment">// &#x4EC5;&#x5728; count &#x66F4;&#x6539;&#x65F6;&#x66F4;&#x65B0;</span>
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-usecallback&#x662F;&#x5E72;&#x4EC0;&#x4E48;&#x7684;&#xFF1F;&#x4F7F;&#x7528;usecallback&#x6709;&#x4EC0;&#x4E48;&#x597D;&#x5904;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-usecallback&#x662F;&#x5E72;&#x4EC0;&#x4E48;&#x7684;&#xFF1F;&#x4F7F;&#x7528;usecallback&#x6709;&#x4EC0;&#x4E48;&#x597D;&#x5904;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-usecallback&#x662F;&#x5E72;&#x4EC0;&#x4E48;&#x7684;&#xFF1F;&#x4F7F;&#x7528;usecallback&#x6709;&#x4EC0;&#x4E48;&#x597D;&#x5904;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-usecallback&#x662F;&#x5E72;&#x4EC0;&#x4E48;&#x7684;&#xFF1F;&#x4F7F;&#x7528;usecallback&#x6709;&#x4EC0;&#x4E48;&#x597D;&#x5904;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-usecallback&#x662F;&#x5E72;&#x4EC0;&#x4E48;&#x7684;&#xFF1F;&#x4F7F;&#x7528;usecallback&#x6709;&#x4EC0;&#x4E48;&#x597D;&#x5904;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; useCallback&#x662F;&#x5E72;&#x4EC0;&#x4E48;&#x7684;&#xFF1F;&#x4F7F;&#x7528;useCallback&#x6709;&#x4EC0;&#x4E48;&#x597D;&#x5904;&#xFF1F;</p></h3>
<p><a href="https://zh-hans.reactjs.org/docs/hooks-reference.html#usecallback" target="_blank">useCallback</a></p>
<h5 id="answer_27"><a name="answer_27" class="anchor-navigation-ex-anchor" href="#answer_27"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<blockquote>
<p>&#x628A;&#x5185;&#x8054;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#x53CA;&#x4F9D;&#x8D56;&#x9879;&#x6570;&#x7EC4;&#x4F5C;&#x4E3A;&#x53C2;&#x6570;&#x4F20;&#x5165; useCallback&#xFF0C;&#x5B83;&#x5C06;&#x8FD4;&#x56DE;&#x8BE5;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#x7684; memoized(&#x7F13;&#x5B58;)&#x7248;&#x672C;&#xFF0C;&#x8BE5;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#x4EC5;&#x5728;&#x67D0;&#x4E2A;&#x4F9D;&#x8D56;&#x9879;&#x6539;&#x53D8;&#x65F6;&#x624D;&#x4F1A;&#x66F4;&#x65B0;
<strong><em>&#x597D;&#x5904;</em></strong>
&#x5F53;&#x4F60;&#x628A;&#x56DE;&#x8C03;&#x51FD;&#x6570;&#x4F20;&#x9012;&#x7ED9;&#x7ECF;&#x8FC7;&#x4F18;&#x5316;&#x7684;&#x5E76;&#x4F7F;&#x7528;&#x5F15;&#x7528;&#x76F8;&#x7B49;&#x6027;&#x53BB;&#x907F;&#x514D;&#x975E;&#x5FC5;&#x8981;&#x6E32;&#x67D3;&#xFF08;&#x4F8B;&#x5982; shouldComponentUpdate&#xFF09;&#x7684;&#x5B50;&#x7EC4;&#x4EF6;&#x65F6;&#xFF0C;&#x5B83;&#x5C06;&#x975E;&#x5E38;&#x6709;&#x7528;</p>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x80FD;&#x7B80;&#x5355;&#x8BF4;&#x4E00;&#x4E0B;redux-sage&#x7684;&#x4F7F;&#x7528;&#x6D41;&#x7A0B;&#x5417;&#xFF1F;"><a name="&#x2605;&#x2605;&#x2605;-&#x80FD;&#x7B80;&#x5355;&#x8BF4;&#x4E00;&#x4E0B;redux-sage&#x7684;&#x4F7F;&#x7528;&#x6D41;&#x7A0B;&#x5417;&#xFF1F;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x80FD;&#x7B80;&#x5355;&#x8BF4;&#x4E00;&#x4E0B;redux-sage&#x7684;&#x4F7F;&#x7528;&#x6D41;&#x7A0B;&#x5417;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x80FD;&#x7B80;&#x5355;&#x8BF4;&#x4E00;&#x4E0B;redux-sage&#x7684;&#x4F7F;&#x7528;&#x6D41;&#x7A0B;&#x5417;&#xFF1F;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x80FD;&#x7B80;&#x5355;&#x8BF4;&#x4E00;&#x4E0B;redux-sage&#x7684;&#x4F7F;&#x7528;&#x6D41;&#x7A0B;&#x5417;&#xFF1F;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x80FD;&#x7B80;&#x5355;&#x8BF4;&#x4E00;&#x4E0B;redux-sage&#x7684;&#x4F7F;&#x7528;&#x6D41;&#x7A0B;&#x5417;&#xFF1F;</p></h3>
<p><a href="https://redux-saga.js.org/" target="_blank">redux-saga</a></p>
<h5 id="answer_28"><a name="answer_28" class="anchor-navigation-ex-anchor" href="#answer_28"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<blockquote>
<p>redux-saga &#x662F;&#x4E00;&#x4E2A;&#x7528;&#x4E8E;&#x7BA1;&#x7406; Redux &#x5E94;&#x7528;&#x5F02;&#x6B65;&#x64CD;&#x4F5C;&#x7684;&#x4E2D;&#x95F4;&#x4EF6;&#xFF08;&#x53C8;&#x79F0;&#x5F02;&#x6B65; action&#xFF09;&#x3002; redux-saga &#x901A;&#x8FC7;&#x521B;&#x5EFA; Sagas &#x5C06;&#x6240;&#x6709;&#x7684;&#x5F02;&#x6B65;&#x64CD;&#x4F5C;&#x903B;&#x8F91;&#x6536;&#x96C6;&#x5728;&#x4E00;&#x4E2A;&#x5730;&#x65B9;&#x96C6;&#x4E2D;&#x5904;&#x7406;&#xFF0C;&#x53EF;&#x4EE5;&#x7528;&#x6765;&#x4EE3;&#x66FF; redux-thunk &#x4E2D;&#x95F4;&#x4EF6;&#x3002;</p>
<ul>
<li>Reducers &#x8D1F;&#x8D23;&#x5904;&#x7406; action &#x7684; state &#x66F4;&#x65B0;</li>
<li>Sagas &#x8D1F;&#x8D23;&#x534F;&#x8C03;&#x90A3;&#x4E9B;&#x590D;&#x6742;&#x6216;&#x5F02;&#x6B65;&#x7684;&#x64CD;&#x4F5C;</li>
</ul>
</blockquote>
<ul>
<li>&#x2460;connet to the store&#xFF1A;&#x672C;&#x8D28;&#x662F;&#x7BA1;&#x7406; Redux &#x5E94;&#x7528;&#x5F02;&#x6B65;&#x64CD;&#x4F5C;&#x7684;&#x4E2D;&#x95F4;&#x4EF6;</li>
</ul>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> { createStore, applyMiddleware } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;redux&apos;</span>
<span class="hljs-keyword">import</span> createSagaMiddleware <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;redux-saga&apos;</span>

<span class="hljs-keyword">import</span> reducer <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./reducers&apos;</span>
<span class="hljs-keyword">import</span> mySaga <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./sagas&apos;</span>

<span class="hljs-comment">// Create the saga middleware</span>
<span class="hljs-keyword">const</span> sagaMiddleware = createSagaMiddleware()
<span class="hljs-comment">// Mount it on the Store</span>
<span class="hljs-keyword">const</span> store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
)

<span class="hljs-comment">// Then run the saga</span>
sagaMiddleware.run(mySaga)

<span class="hljs-comment">// Render the application</span>
</code></pre>
<ul>
<li>&#x2461;initiate a side effect&#xFF1A;&#x521D;&#x59CB;&#x5316;&#x526F;&#x4F5C;&#x7528;</li>
</ul>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> { call, put, takeEvery, takeLatest } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;redux-saga/effects&apos;</span>
<span class="hljs-keyword">import</span> Api <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;...&apos;</span>

<span class="hljs-comment">// Worker saga will be fired on USER_FETCH_REQUESTED actions</span>
<span class="hljs-function"><span class="hljs-keyword">function</span>* <span class="hljs-title">fetchUser</span>(<span class="hljs-params">action</span>) </span>{
   <span class="hljs-keyword">try</span> {
      <span class="hljs-keyword">const</span> user = <span class="hljs-keyword">yield</span> call(Api.fetchUser, action.payload.userId);
      <span class="hljs-keyword">yield</span> put({type: <span class="hljs-string">&quot;USER_FETCH_SUCCEEDED&quot;</span>, user: user});
   } <span class="hljs-keyword">catch</span> (e) {
      <span class="hljs-keyword">yield</span> put({type: <span class="hljs-string">&quot;USER_FETCH_FAILED&quot;</span>, message: e.message});
   }
}

<span class="hljs-comment">// Starts fetchUser on each dispatched USER_FETCH_REQUESTED action</span>
<span class="hljs-comment">// Allows concurrent fetches of user</span>
<span class="hljs-function"><span class="hljs-keyword">function</span>* <span class="hljs-title">mySaga</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">yield</span> takeEvery(<span class="hljs-string">&quot;USER_FETCH_REQUESTED&quot;</span>, fetchUser);
}
</code></pre>
<ul>
<li>&#x2462;dispath an action&#xFF1A;&#x7EC4;&#x4EF6;&#x4E2D;&#x4F7F;&#x7528;</li>
</ul>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">UserComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
  ...
  onSomeButtonClicked() {
    <span class="hljs-keyword">const</span> { userId, dispatch } = <span class="hljs-keyword">this</span>.props
    dispatch({type: <span class="hljs-string">&apos;USER_FETCH_REQUESTED&apos;</span>, payload: {userId}})
  }
  ...
}
</code></pre>
<ul>
<li>&#x2463;more&#xFF1A;takeEvery&#x3001;takeLatest&#x3001;take&#x3001;put&#x3001;call&#x3001;fork&#x3001;select</li>
</ul>
<h3 id="&#x2605;&#x2605;&#x2605;&#x2605;-react&#x590D;&#x7528;&#x7EC4;&#x4EF6;&#x7684;&#x72B6;&#x6001;&#x548C;&#x589E;&#x5F3A;&#x529F;&#x80FD;&#x7684;&#x65B9;&#x6CD5;"><a name="&#x2605;&#x2605;&#x2605;&#x2605;-react&#x590D;&#x7528;&#x7EC4;&#x4EF6;&#x7684;&#x72B6;&#x6001;&#x548C;&#x589E;&#x5F3A;&#x529F;&#x80FD;&#x7684;&#x65B9;&#x6CD5;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-react&#x590D;&#x7528;&#x7EC4;&#x4EF6;&#x7684;&#x72B6;&#x6001;&#x548C;&#x589E;&#x5F3A;&#x529F;&#x80FD;&#x7684;&#x65B9;&#x6CD5;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;&#x2605;-react&#x590D;&#x7528;&#x7EC4;&#x4EF6;&#x7684;&#x72B6;&#x6001;&#x548C;&#x589E;&#x5F3A;&#x529F;&#x80FD;&#x7684;&#x65B9;&#x6CD5;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;&#x2605;-react&#x590D;&#x7528;&#x7EC4;&#x4EF6;&#x7684;&#x72B6;&#x6001;&#x548C;&#x589E;&#x5F3A;&#x529F;&#x80FD;&#x7684;&#x65B9;&#x6CD5;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605;&#x2605; React&#x590D;&#x7528;&#x7EC4;&#x4EF6;&#x7684;&#x72B6;&#x6001;&#x548C;&#x589E;&#x5F3A;&#x529F;&#x80FD;&#x7684;&#x65B9;&#x6CD5;</p></h3>
<h5 id="answer_29"><a name="answer_29" class="anchor-navigation-ex-anchor" href="#answer_29"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<ul>
<li>&#x2460;render props&#x6A21;&#x5F0F;</li>
</ul>
<blockquote>
<ul>
<li>&#x521B;&#x5EFA;Mouse&#x7EC4;&#x4EF6;&#xFF0C;&#x5728;&#x7EC4;&#x4EF6;&#x4E2D;&#x63D0;&#x4F9B;&#x590D;&#x7528;&#x7684;&#x72B6;&#x6001;&#x903B;&#x8F91;&#x4EE3;&#x7801;</li>
<li>&#x5C06;&#x8981;&#x590D;&#x7528;&#x7684;&#x72B6;&#x6001;&#x4F5C;&#x4E3A; props.render(state) &#x65B9;&#x6CD5;&#x7684;&#x53C2;&#x6570;&#xFF0C;&#x66B4;&#x9732;&#x5230;&#x7EC4;&#x4EF6;&#x5916;&#x90E8;</li>
<li>&#x4F7F;&#x7528; props.render() &#x7684;&#x8FD4;&#x56DE;&#x503C;&#x4F5C;&#x4E3A;&#x8981;&#x6E32;&#x67D3;&#x7684;&#x5185;&#x5BB9; </li>
</ul>
</blockquote>
<pre><code class="lang-js"><span class="hljs-comment">// &#x5B50;&#x7EC4;&#x4EF6;</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Mouse</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{
    <span class="hljs-comment">// mouse&#x672C;&#x7EC4;&#x4EF6;&#x7684;&#x6570;&#x636E;</span>
    state={
        x:<span class="hljs-number">0</span>,
        y:<span class="hljs-number">0</span>
    }
    <span class="hljs-comment">// mouse&#x672C;&#x7EC4;&#x4EF6;&#x7684;&#x65B9;&#x6CD5;</span>
    handleMouse=(e)=&gt;{
        <span class="hljs-keyword">this</span>.setState({
            x:e.clientX,
            y:e.clientY
        })
    }
    componentDidMount(){
        <span class="hljs-built_in">window</span>.addEventListener(<span class="hljs-string">&apos;mousemove&apos;</span>,<span class="hljs-keyword">this</span>.handleMouse)
    };
    render(){
        <span class="hljs-comment">// &#x5728;&#x8FD9;&#x91CC;&#x7528;props&#x63A5;&#x6536;&#x4ECE;&#x7236;&#x4F20;&#x8FC7;&#x6765;&#x7684;render&#x51FD;&#x6570;&#xFF0C;&#x518D;&#x628A;state&#x6570;&#x636E;&#x4F5C;&#x4E3A;&#x5B9E;&#x53C2;&#x4F20;&#x9012;&#x51FA;&#x53BB;</span>
        <span class="hljs-comment">// &#x5176;&#x5B9E;&#x6E32;&#x67D3;&#x7684;&#x5C31;&#x662F;&#x4ECE;&#x7236;&#x4F20;&#x8FC7;&#x6765;&#x7684;UI&#x7ED3;&#x6784;&#xFF0C;&#x53EA;&#x662F;&#x516C;&#x7528;&#x4E86;Mouse&#x7EC4;&#x4EF6;&#x7684;&#x6570;&#x636E;&#x548C;&#x65B9;&#x6CD5;</span>
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.props.render(<span class="hljs-keyword">this</span>.state)
    }
}
<span class="hljs-comment">// &#x7236;&#x7EC4;&#x4EF6;</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{
    render(){
        <span class="hljs-keyword">return</span>(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>app&#x7EC4;&#x4EF6;:{this.props.name}<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
            {/* &#x5728;&#x4F7F;&#x7528;mouse&#x7EC4;&#x4EF6;&#x65F6;&#xFF0C;&#x7ED9;mouse&#x4F20;&#x9012;&#x4E00;&#x4E2A;&#x503C;&#xFF08;&#x7236;&#x4F20;&#x5B50;&#xFF09;&#xFF0C;
            &#x53EA;&#x4E0D;&#x8FC7;&#x8FD9;&#x91CC;&#x7684;props&#x662F;&#x51FD;&#x6570;&#xFF0C;&#x8FD9;&#x4E2A;&#x51FD;&#x6570;&#x5C06;&#x8981;&#x7528;&#x5F62;&#x53C2;&#x63A5;&#x53D7;&#x4ECE;mouse&#x7EC4;&#x4EF6;&#x4F20;&#x9012;&#x8FC7;&#x6765;&#x7684;&#x5B9E;&#x53C2;&#xFF08;state&#x6570;&#x636E;&#xFF09; */}
            <span class="hljs-tag">&lt;<span class="hljs-name">Mouse</span> <span class="hljs-attr">render</span>=<span class="hljs-string">{(mouse)=</span>&gt;</span>{
                return (<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">h5</span>&gt;</span>&#x6211;&#x7528;&#x7684;&#x662F;Mouse&#x7684;state&#x548C;&#x65B9;&#x6CD5;&#xFF1A;X&#x5750;&#x6807;{mouse.x}-Y&#x5750;&#x6807;{mouse.y}<span class="hljs-tag">&lt;/<span class="hljs-name">h5</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>)
            }} /&gt;
        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>)
    }
}
</span></code></pre>
<ul>
<li>&#x2461;&#x9AD8;&#x9636;&#x7EC4;&#x4EF6; HOC</li>
</ul>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> EnhancedComponent = withHOC(WrappedComponent)
<span class="hljs-comment">// &#x9AD8;&#x9636;&#x7EC4;&#x4EF6;&#x5185;&#x90E8;&#x521B;&#x5EFA;&#x7684;&#x7C7B;&#x7EC4;&#x4EF6;&#xFF1A;</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Mouse</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
  render() {
    <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">WrappedComponent</span> {<span class="hljs-attr">...this.state</span>} /&gt;</span>
  }
}
</span></code></pre>
<ul>
<li>&#x2462;hooks&#xFF1A;&#x81EA;&#x5B9A;&#x4E49;hook</li>
</ul>
<pre><code class="lang-js"><span class="hljs-comment">// &#x81EA;&#x5B9A;&#x4E49;hook</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">useFriendStatus</span>(<span class="hljs-params">friendID</span>) </span>{
  <span class="hljs-keyword">const</span> [isOnline, setIsOnline] = useState(<span class="hljs-literal">null</span>);
  <span class="hljs-comment">// ...</span>
  <span class="hljs-keyword">return</span> isOnline;
}
<span class="hljs-comment">// &#x4F7F;&#x7528;</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">FriendStatus</span>(<span class="hljs-params">props</span>) </span>{
  <span class="hljs-keyword">const</span> isOnline = useFriendStatus(props.friend.id);
  <span class="hljs-keyword">if</span> (isOnline === <span class="hljs-literal">null</span>) {
    <span class="hljs-keyword">return</span> <span class="hljs-string">&apos;Loading...&apos;</span>;
  }
  <span class="hljs-keyword">return</span> isOnline ? <span class="hljs-string">&apos;Online&apos;</span> : <span class="hljs-string">&apos;Offline&apos;</span>;
}
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-redux-&#x548C;-mobx-&#x7684;&#x533A;&#x522B;"><a name="&#x2605;&#x2605;&#x2605;-redux-&#x548C;-mobx-&#x7684;&#x533A;&#x522B;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-redux-&#x548C;-mobx-&#x7684;&#x533A;&#x522B;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-redux-&#x548C;-mobx-&#x7684;&#x533A;&#x522B;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-redux-&#x548C;-mobx-&#x7684;&#x533A;&#x522B;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; redux &#x548C; mobx &#x7684;&#x533A;&#x522B;</p></h3>
<h5 id="answer_30"><a name="answer_30" class="anchor-navigation-ex-anchor" href="#answer_30"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<blockquote>
<ul>
<li>&#x2460;Redux&#x7684;&#x7F16;&#x7A0B;&#x8303;&#x5F0F;&#x662F;&#x51FD;&#x6570;&#x5F0F;&#x7684;&#x800C;Mobx&#x662F;&#x9762;&#x5411;&#x5BF9;&#x8C61;&#x7684;</li>
<li>&#x2461;&#x56E0;&#x6B64;&#x6570;&#x636E;&#x4E0A;&#x6765;&#x8BF4;Redux&#x7406;&#x60F3;&#x7684;&#x662F;immutable&#x7684;&#xFF0C;&#x6BCF;&#x6B21;&#x90FD;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A;&#x65B0;&#x7684;&#x6570;&#x636E;&#xFF0C;&#x800C;Mobx&#x4ECE;&#x59CB;&#x81F3;&#x7EC8;&#x90FD;&#x662F;&#x4E00;&#x4EFD;&#x5F15;&#x7528;&#x3002;&#x56E0;&#x6B64;Redux&#x662F;&#x652F;&#x6301;&#x6570;&#x636E;&#x56DE;&#x6EAF;&#x7684;</li>
<li>&#x2462;&#x7136;&#x800C;&#x548C;Redux&#x76F8;&#x6BD4;&#xFF0C;&#x4F7F;&#x7528;Mobx&#x7684;&#x7EC4;&#x4EF6;&#x53EF;&#x4EE5;&#x505A;&#x5230;&#x7CBE;&#x786E;&#x66F4;&#x65B0;&#xFF0C;&#x8FD9;&#x4E00;&#x70B9;&#x5F97;&#x76CA;&#x4E8E;Mobx&#x7684;observable&#xFF1B;&#x5BF9;&#x5E94;&#x7684;&#xFF0C;Redux&#x662F;&#x7528;dispatch&#x8FDB;&#x884C;&#x5E7F;&#x64AD;&#xFF0C;&#x901A;&#x8FC7;Provider&#x548C;connect&#x6765;&#x6BD4;&#x5BF9;&#x524D;&#x540E;&#x5DEE;&#x522B;&#x63A7;&#x5236;&#x66F4;&#x65B0;&#x7C92;&#x5EA6;&#xFF0C;&#x6709;&#x65F6;&#x9700;&#x8981;&#x81EA;&#x5DF1;&#x5199;SCU&#xFF1B;Mobx&#x66F4;&#x52A0;&#x7CBE;&#x7EC6;&#x4E00;&#x70B9;</li>
<li>&#x2463;Mobx-react vs React-rdux&#xFF1A;</li>
</ul>
<blockquote>
<p>redux,&#x91C7;&#x53D6;Provider&#x548C;connect&#x65B9;&#x5F0F;&#xFF0C;mobx&#x91C7;&#x53D6;Provider&#x548C;inject&#x3001;observer</p>
</blockquote>
</blockquote>
<h3 id="&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x547D;&#x540D;&#x63D2;&#x69FD;"><a name="&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x547D;&#x540D;&#x63D2;&#x69FD;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x547D;&#x540D;&#x63D2;&#x69FD;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x547D;&#x540D;&#x63D2;&#x69FD;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-react&#x4E2D;&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x547D;&#x540D;&#x63D2;&#x69FD;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; react&#x4E2D;&#x5982;&#x4F55;&#x5B9E;&#x73B0;&#x547D;&#x540D;&#x63D2;&#x69FD;</p></h3>
<h5 id="answer_31"><a name="answer_31" class="anchor-navigation-ex-anchor" href="#answer_31"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<pre><code class="lang-jsx"><span class="hljs-keyword">import</span> React, { Component } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> ReactDOM <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react-dom&apos;</span>;
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ParentCom</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
    <span class="hljs-keyword">constructor</span>(props) {
        <span class="hljs-keyword">super</span>(props)
        <span class="hljs-built_in">console</span>.log(props);
    }
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>&#x7EC4;&#x4EF6;&#x63D2;&#x69FD;<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
                {this.props.children}
                <span class="hljs-tag">&lt;<span class="hljs-name">ChildCom</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">data-position</span>=<span class="hljs-string">&quot;header&quot;</span>&gt;</span>&#x8FD9;&#x662F;&#x653E;&#x5728;&#x5934;&#x90E8;&#x7684;&#x5185;&#x5BB9;<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">data-position</span>=<span class="hljs-string">&quot;main&quot;</span>&gt;</span>&#x8FD9;&#x662F;&#x653E;&#x5728;&#x4E3B;&#x4F53;&#x7684;&#x5185;&#x5BB9;<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">h1</span> <span class="hljs-attr">data-position</span>=<span class="hljs-string">&quot;footer&quot;</span>&gt;</span>&#x8FD9;&#x662F;&#x653E;&#x5728;&#x5C3E;&#x90E8;&#x7684;&#x5185;&#x5BB9;<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">ChildCom</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
        )
    }
}
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ChildCom</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
    render() {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.props);
        <span class="hljs-keyword">let</span> headerCom, mainCom, footerCom
        <span class="hljs-keyword">this</span>.props.children.forEach((item,index) =&gt; {
            <span class="hljs-keyword">if</span> (item.props[<span class="hljs-string">&apos;data-position&apos;</span>] === <span class="hljs-string">&apos;header&apos;</span>) {
                headerCom = item
            }<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (item.props[<span class="hljs-string">&apos;data-position&apos;</span>] === <span class="hljs-string">&apos;main&apos;</span>) {
                mainCom = item
            }<span class="hljs-keyword">else</span> {
                footerCom = item
            }
        })
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;header&quot;</span>&gt;</span>
                   {headerCom}
                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;main&quot;</span>&gt;</span>
                   {mainCom}
                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">&quot;footer&quot;</span>&gt;</span>
                    {footerCom}
                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
        )
    }
}
ReactDOM.render(
    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">ParentCom</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#x5B50;&#x7EC4;&#x4EF6;1<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#x5B50;&#x7EC4;&#x4EF6;2<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#x5B50;&#x7EC4;&#x4EF6;3<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">ParentCom</span>&gt;</span></span>,
    <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&apos;root&apos;</span>)
)
</code></pre>
<h3 id="&#x2605;&#x2605;&#x2605;-&#x7B80;&#x5355;&#x8BF4;&#x4E00;&#x4E0B;&#xFF0C;&#x5982;&#x4F55;&#x5728;react&#x4E2D;&#x5B9E;&#x73B0;&#x7011;&#x5E03;&#x6D41;&#x52A0;&#x8F7D;&#xFF1F;&#xFF08;&#x5DE6;&#x53F3;&#x4E24;&#x5217;&#x7684;&#x4E00;&#x4E2A;&#x5546;&#x54C1;&#x957F;&#x5217;&#x8868;&#xFF09;"><a name="&#x2605;&#x2605;&#x2605;-&#x7B80;&#x5355;&#x8BF4;&#x4E00;&#x4E0B;&#xFF0C;&#x5982;&#x4F55;&#x5728;react&#x4E2D;&#x5B9E;&#x73B0;&#x7011;&#x5E03;&#x6D41;&#x52A0;&#x8F7D;&#xFF1F;&#xFF08;&#x5DE6;&#x53F3;&#x4E24;&#x5217;&#x7684;&#x4E00;&#x4E2A;&#x5546;&#x54C1;&#x957F;&#x5217;&#x8868;&#xFF09;" class="anchor-navigation-ex-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x7B80;&#x5355;&#x8BF4;&#x4E00;&#x4E0B;&#xFF0C;&#x5982;&#x4F55;&#x5728;react&#x4E2D;&#x5B9E;&#x73B0;&#x7011;&#x5E03;&#x6D41;&#x52A0;&#x8F7D;&#xFF1F;&#xFF08;&#x5DE6;&#x53F3;&#x4E24;&#x5217;&#x7684;&#x4E00;&#x4E2A;&#x5546;&#x54C1;&#x957F;&#x5217;&#x8868;&#xFF09;"><i class="fa fa-link" aria-hidden="true"></i></a><a name="&#x2605;&#x2605;&#x2605;-&#x7B80;&#x5355;&#x8BF4;&#x4E00;&#x4E0B;&#xFF0C;&#x5982;&#x4F55;&#x5728;react&#x4E2D;&#x5B9E;&#x73B0;&#x7011;&#x5E03;&#x6D41;&#x52A0;&#x8F7D;&#xFF1F;&#xFF08;&#x5DE6;&#x53F3;&#x4E24;&#x5217;&#x7684;&#x4E00;&#x4E2A;&#x5546;&#x54C1;&#x957F;&#x5217;&#x8868;&#xFF09;" class="plugin-anchor" href="#&#x2605;&#x2605;&#x2605;-&#x7B80;&#x5355;&#x8BF4;&#x4E00;&#x4E0B;&#xFF0C;&#x5982;&#x4F55;&#x5728;react&#x4E2D;&#x5B9E;&#x73B0;&#x7011;&#x5E03;&#x6D41;&#x52A0;&#x8F7D;&#xFF1F;&#xFF08;&#x5DE6;&#x53F3;&#x4E24;&#x5217;&#x7684;&#x4E00;&#x4E2A;&#x5546;&#x54C1;&#x957F;&#x5217;&#x8868;&#xFF09;"><i class="fa fa-link" aria-hidden="true"></i></a><p id="react-1">&#x2605;&#x2605;&#x2605; &#x7B80;&#x5355;&#x8BF4;&#x4E00;&#x4E0B;&#xFF0C;&#x5982;&#x4F55;&#x5728;react&#x4E2D;&#x5B9E;&#x73B0;&#x7011;&#x5E03;&#x6D41;&#x52A0;&#x8F7D;&#xFF1F;&#xFF08;&#x5DE6;&#x53F3;&#x4E24;&#x5217;&#x7684;&#x4E00;&#x4E2A;&#x5546;&#x54C1;&#x957F;&#x5217;&#x8868;&#xFF09;</p></h3>
<h5 id="answer_32"><a name="answer_32" class="anchor-navigation-ex-anchor" href="#answer_32"><i class="fa fa-link" aria-hidden="true"></i></a><a name="answer" class="plugin-anchor" href="#answer"><i class="fa fa-link" aria-hidden="true"></i></a>Answer</h5>
<p><img src="https://img-blog.csdnimg.cn/20190727101059433.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lzSG9NZVRvd24=,size_16,color_FFFFFF,t_70" alt="&#x7011;&#x5E03;&#x6D41;"></p>
<blockquote>
<p>&#x6839;&#x636E;&#x7EA2;&#x7EBF;&#xFF0C;&#x5C06;&#x6570;&#x636E;&#x5206;&#x4E3A;&#x4E24;&#x90E8;&#x5206;&#xFF0C;&#x7136;&#x540E;&#x6839;&#x636E;&#x4E24;&#x8FB9;&#x7684;&#x9AD8;&#x5EA6;&#xFF08;&#x54EA;&#x8FB9;&#x5C11;&#x5F80;&#x90A3;&#x8FB9;&#x52A0;&#x5185;&#x5BB9;&#xFF09;&#x53BB;&#x6E32;&#x67D3;&#x4E24;&#x4E2A;&#x76D2;&#x5B50;&#xFF0C;&#x7136;&#x540E;&#x8FBE;&#x5230;&#x4E00;&#x4E2A;&#x7011;&#x5E03;&#x6D41;&#x7684;&#x6548;&#x679C;</p>
</blockquote>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React, { Component,Fragment } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> {connect} <span class="hljs-keyword">from</span><span class="hljs-string">&apos;react-redux&apos;</span>
<span class="hljs-keyword">import</span> Axios <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;_axios@0.19.0@axios&apos;</span>;
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Waterfall</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
    <span class="hljs-keyword">constructor</span>(props) {
        <span class="hljs-keyword">super</span>(props);
        <span class="hljs-keyword">this</span>.state = { 
            data:[],<span class="hljs-comment">//&#x6574;&#x4F53;&#x7684;&#x6570;&#x636E;</span>
            leftData:[],<span class="hljs-comment">//&#x5DE6;&#x8FB9;&#x7684;&#x6570;&#x636E;</span>
            rightData:[]<span class="hljs-comment">//&#x53F3;&#x8FB9;&#x7684;&#x6570;&#x636E;</span>
         }
    }
    getHW(data){
        <span class="hljs-keyword">let</span> heightDate = [<span class="hljs-number">0</span>,<span class="hljs-number">0</span>];<span class="hljs-comment">//&#x63A5;&#x6536;&#x7D2F;&#x8BA1;&#x9AD8;&#x5EA6;&#x7684;&#x5BB9;&#x5668;&#x6570;&#x7EC4;</span>
        <span class="hljs-keyword">let</span> rightData =[]<span class="hljs-comment">//&#x6E32;&#x67D3;&#x53F3;&#x4FA7;&#x76D2;&#x5B50;&#x7684;&#x6570;&#x7EC4;</span>
        <span class="hljs-keyword">let</span> leftData = []<span class="hljs-comment">//&#x6E32;&#x67D3;&#x5DE6;&#x4FA7;&#x76D2;&#x5B50;&#x7684;&#x6570;&#x7EC4;</span>
        data.forEach(item =&gt; {
            <span class="hljs-keyword">let</span> height = item.src.replace(<span class="hljs-string">&apos;http://dummyimage.com/&apos;</span>,<span class="hljs-string">&apos;&apos;</span>).substr(<span class="hljs-number">0</span>,<span class="hljs-number">7</span>).split(<span class="hljs-string">&apos;x&apos;</span>)[<span class="hljs-number">1</span>]*<span class="hljs-number">1</span>;<span class="hljs-comment">//&#x5BF9;url&#x5730;&#x5740;&#x8FDB;&#x884C;&#x4E00;&#x4E2A;&#x622A;&#x53D6;&#xFF0C;&#x62FF;&#x5230;&#x9AD8;&#x5EA6;</span>
            <span class="hljs-keyword">let</span> minNum = <span class="hljs-built_in">Math</span>.min.apply(<span class="hljs-literal">null</span>,heightDate)<span class="hljs-comment">// &#x4ECE;heighetData&#x7B5B;&#x9009;&#x6700;&#x5C0F;&#x9879;</span>
            <span class="hljs-keyword">let</span> minIndex = heightDate.indexOf(minNum);<span class="hljs-comment">// &#x83B7;&#x53D6; &#x6700;&#x5C0F;&#x9879;&#x7684;&#x5C0F;&#x6807; &#x51C6;&#x5907;&#x5F00;&#x59CB;&#x8FDB;&#x884C;&#x7D2F;&#x52A0;</span>
            heightDate[minIndex] = heightDate[minIndex] + height;<span class="hljs-comment">//&#x4ECE; heightData &#x4E2D;&#x627E;&#x5230;&#x6700;&#x5C0F;&#x7684;&#x9879;&#x540E;&#x8FDB;&#x884C;&#x7D2F;&#x52A0;&#xFF0C; </span>
            <span class="hljs-keyword">if</span>(minIndex===<span class="hljs-number">0</span>){<span class="hljs-comment">//[0]&#x52A0;&#x5230;left [1]&#x52A0;&#x5230; right</span>
                leftData.push(item)
            }<span class="hljs-keyword">else</span>{
                rightData.push(item)
            }
        })
        <span class="hljs-keyword">this</span>.setState({ leftData,rightData  });<span class="hljs-comment">//&#x91CD;&#x65B0;set state</span>
    }
    render() { 
        <span class="hljs-keyword">let</span> {leftData,rightData} = <span class="hljs-keyword">this</span>.state;
        <span class="hljs-built_in">console</span>.log(leftData,rightData)
        <span class="hljs-keyword">return</span> ( 
            &lt;Fragment&gt;
                &lt;div className=&apos;left&apos;&gt;
                    {
                        leftData &amp;&amp; leftData.map((item,index)=&gt;{
                            return &lt;img src={item.src} alt={index} key={index}/&gt;
                        })
                    }
                &lt;/div&gt;
                &lt;div className=&apos;right&apos;&gt;
                    {
                        rightData &amp;&amp; rightData.map((item,index)=&gt;{
                            return &lt;img src={item.src} alt={index} key={index}/&gt;
                        })
                    }
                &lt;/div&gt;
            &lt;/Fragment&gt;
         );
    }
    componentDidMount(){
        Axios.get(&apos;/api/data&apos;).then(res=&gt;{
            this.props.dispatch({
                type:&apos;SET_DATA&apos;,
                data:res.data.data
            })
            this.getHW(this.props.data) //&#x8C03;&#x7528;
        })
    }
}

export default connect(
    (state)=&gt;{
        return{
            data:state.data,
        }
    }
)(Waterfall);
</code></pre>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="../vue/" class="navigation navigation-prev " aria-label="Previous page: Vue.js">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="../weapp/" class="navigation navigation-next " aria-label="Next page: 小程序">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"React","level":"1.6","depth":1,"next":{"title":"小程序","level":"1.7","depth":1,"path":"weapp/index.md","ref":"./weapp/index.md","articles":[]},"previous":{"title":"Vue.js","level":"1.5","depth":1,"path":"vue/index.md","ref":"./vue/index.md","articles":[]},"dir":"ltr"},"config":{"plugins":["-sharing","splitter","expandable-chapters-small","anchors","github","github-buttons","sharing-plus","anchor-navigation-ex","favicon","insert-logo"],"styles":{"website":"./styles/website.css"},"pluginsConfig":{"github":{"url":"https://github.com/lurongtao/felixbooks-interview"},"splitter":{},"search":{},"sharing-plus":{"qq":false,"all":["facebook","google","twitter","instapaper","linkedin","pocket","stumbleupon"],"douban":false,"facebook":true,"weibo":false,"instapaper":false,"whatsapp":false,"hatenaBookmark":false,"twitter":true,"messenger":false,"line":false,"vk":false,"pocket":true,"google":false,"viber":false,"stumbleupon":false,"qzone":false,"linkedin":false},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"fontsettings":{"theme":"white","family":"sans","size":2},"highlight":{},"anchor-navigation-ex":{"associatedWithSummary":true,"float":{"floatIcon":"fa fa-navicon","level1Icon":"","level2Icon":"","level3Icon":"","showLevelIcon":false},"mode":"float","multipleH1":true,"pageTop":{"level1Icon":"","level2Icon":"","level3Icon":"","showLevelIcon":false},"printLog":false,"showGoTop":true,"showLevel":false},"favicon":{"shortcut":"./source/images/favicon.jpg","bookmark":"./source/images/favicon.jpg","appleTouch":"./source/images/apple-touch-icon.jpg","appleTouchMore":{"120x120":"./source/images/apple-touch-icon.jpg","180x180":"./source/images/apple-touch-icon.jpg"}},"github-buttons":{"buttons":[{"user":"lurongtao","repo":"felixbooks-interview","type":"star","size":"small","count":true}]},"expandable-chapters-small":{},"sharing":{"qq":false,"all":["google","facebook","weibo","twitter","qq","qzone","linkedin","pocket"],"douban":false,"facebook":false,"weibo":false,"instapaper":false,"whatsapp":false,"hatenaBookmark":false,"twitter":false,"messenger":false,"line":false,"vk":false,"pocket":false,"google":false,"viber":false,"stumbleupon":false,"qzone":false,"linkedin":false},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false},"anchors":{},"insert-logo":{"url":"/felixbooks-interview2/images/logo-interview.png","style":"background: skyblue; width: 100%; height: 100%;"}},"theme":"default","author":"古艺散人","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"千锋大前端小册-企业面试真题","language":"zh-hans","links":{},"gitbook":"3.2.3","description":"Electron 入门与实战"},"file":{"path":"react/index.md","mtime":"2021-05-06T23:24:01.158Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2021-05-06T23:31:20.692Z"},"basePath":"..","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="../gitbook/gitbook.js"></script>
    <script src="../gitbook/theme.js"></script>
    
        
        <script src="../gitbook/gitbook-plugin-splitter/splitter.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-expandable-chapters-small/expandable-chapters-small.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-github/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-github-buttons/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-sharing-plus/buttons.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-insert-logo/plugin.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-search/search.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
        
    
        
        <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    

    </body>
</html>

